Skip to content

Instantly share code, notes, and snippets.

@SamSaffron
Created August 16, 2025 02:00
Show Gist options
  • Save SamSaffron/29dda3f9a2dfad4961b5cea778a1eb2d to your computer and use it in GitHub Desktop.
Save SamSaffron/29dda3f9a2dfad4961b5cea778a1eb2d to your computer and use it in GitHub Desktop.
convert-files

Converting Ember’s Input component to native <input>

This guide inventories where Input appears in the codebase and provides practical steps to convert usages from Input (uppercase Ember component) to native HTML <input> (lowercase), with patterns for common input types and events.

Generated on: 2025-08-16


What to convert

  • The target is usages of the Ember built-in <Input ...> component in templates (.gjs, .js Glimmer templates). Replace them with native <input ...>.
  • Plain mentions of the word “Input” in strings, comments, or unrelated code do not need conversion, but an audit list is provided below for completeness.

Files using the <Input> component

These .js/.gjs files contain <Input and should be reviewed and converted:

  • plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs (converted)
  • plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs (converted)
  • plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs (converted)
  • plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs (converted)
  • plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs (converted)
  • plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs (converted)
  • plugins/discourse-topic-voting/assets/javascripts/discourse/connectors/category-custom-settings/feature-voting-settings.gjs (converted)
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/subscribe/show.gjs (converted)
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show-plans-show.gjs (converted)
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show.gjs (converted)
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-coupons.gjs (converted)
  • plugins/discourse-subscriptions/assets/javascripts/discourse/components/create-coupon-form.gjs
  • plugins/discourse-subscriptions/assets/javascripts/discourse/components/modal/admin-cancel-subscription.gjs
  • plugins/discourse-rss-polling/assets/javascripts/discourse/templates/admin/plugins-rss-polling.gjs
  • plugins/discourse-post-voting/assets/javascripts/discourse/connectors/category-custom-settings/post-voting-category-settings.gjs
  • plugins/discourse-hcaptcha/assets/javascripts/discourse/components/h-captcha.gjs
  • plugins/discourse-data-explorer/assets/javascripts/discourse/templates/admin/plugins-explorer-queries-details.gjs
  • plugins/discourse-chat-integration/admin/assets/javascripts/admin/components/channel-param-row.gjs
  • plugins/discourse-calendar/assets/javascripts/discourse/connectors/category-custom-settings/show-event-category-sorting-settings.gjs
  • plugins/discourse-calendar/assets/javascripts/discourse/components/modal/post-event-builder.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/templates/user-activity-assigned.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/templates/group/assigned.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/templates/group-assigned-show.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/connectors/category-custom-settings/assign-settings.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/rag-uploader.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/modal/share-modal.gjs
  • plugins/discourse-adplugin/admin/assets/javascripts/admin/templates/plugins-house-ads-show.gjs
  • plugins/chat/assets/javascripts/discourse/templates/preferences/chat.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/modal/edit-channel-name.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/modal/thread-settings.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/modal/create-channel.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/message-creator/members.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/message-creator/new-group.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/message-creator/search-input.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat-message.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/topic-trigger.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-date-time-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-boolean-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-pms-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-period-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-text-field.gjs
  • app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
  • app/assets/javascripts/discourse/app/templates/users.gjs
  • app/assets/javascripts/discourse/app/templates/user/bookmarks.gjs
  • app/assets/javascripts/discourse/app/templates/preferences/profile.gjs
  • app/assets/javascripts/discourse/app/templates/signup.gjs
  • app/assets/javascripts/discourse/app/templates/invites/show.gjs
  • app/assets/javascripts/discourse/app/templates/group-index.gjs
  • app/assets/javascripts/discourse/app/templates/full-page-search.gjs
  • app/assets/javascripts/discourse/app/components/username-preference.gjs
  • app/assets/javascripts/discourse/app/components/user-preferences/rename-passkey.gjs
  • app/assets/javascripts/discourse/app/components/user-fields/text.gjs
  • app/assets/javascripts/discourse/app/components/user-fields/confirm.gjs
  • app/assets/javascripts/discourse/app/components/sidebar/section-form-link.gjs
  • app/assets/javascripts/discourse/app/components/preference-checkbox.gjs
  • app/assets/javascripts/discourse/app/components/reviewable-field-text.gjs
  • app/assets/javascripts/discourse/app/components/modal/user-status.gjs
  • app/assets/javascripts/discourse/app/components/modal/second-factor-edit.gjs
  • app/assets/javascripts/discourse/app/components/modal/publish-page.gjs
  • app/assets/javascripts/discourse/app/components/modal/jump-to-post.gjs
  • app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.gjs
  • app/assets/javascripts/discourse/app/components/modal/revise-and-reject-post-reviewable.gjs
  • app/assets/javascripts/discourse/app/components/modal/second-factor-add-security-key.gjs
  • app/assets/javascripts/discourse/app/components/modal/move-to-topic.gjs
  • app/assets/javascripts/discourse/app/components/modal/change-timestamp.gjs
  • app/assets/javascripts/discourse/app/components/modal/group-add-members.gjs
  • app/assets/javascripts/discourse/app/components/modal/edit-slow-mode.gjs
  • app/assets/javascripts/discourse/app/components/modal/bulk-topic-actions.gjs
  • app/assets/javascripts/discourse/app/components/modal/bookmark.gjs
  • app/assets/javascripts/discourse/app/components/modal/edit-user-directory-columns.gjs
  • app/assets/javascripts/discourse/app/components/modal/download-calendar.gjs
  • app/assets/javascripts/discourse/app/components/local-login-form.gjs
  • app/assets/javascripts/discourse/app/components/form-template-field/input.gjs
  • app/assets/javascripts/discourse/app/components/group-list.gjs
  • app/assets/javascripts/discourse/app/components/form-template-field/checkbox.gjs
  • app/assets/javascripts/discourse/app/components/edit-category-settings.gjs
  • app/assets/javascripts/discourse/app/components/edit-category-tags.gjs
  • app/assets/javascripts/discourse/app/components/d-multi-select.gjs
  • app/assets/javascripts/discourse/app/components/dialog-messages/confirm-session.gjs
  • app/assets/javascripts/discourse/app/components/calendar-date-time-input.gjs
  • app/assets/javascripts/discourse/app/components/composer-container.gjs
  • app/assets/javascripts/admin/addon/templates/watched-words-action.gjs
  • app/assets/javascripts/admin/addon/templates/user-badges.gjs
  • app/assets/javascripts/admin/addon/templates/email-templates-edit.gjs
  • app/assets/javascripts/admin/addon/templates/customize-colors-show.gjs
  • app/assets/javascripts/admin/addon/components/themes-list-item.gjs
  • app/assets/javascripts/admin/addon/components/webhook-event-chooser.gjs
  • app/assets/javascripts/admin/addon/components/theme-upload-add.gjs
  • app/assets/javascripts/admin/addon/components/schema-setting/types/string.gjs
  • app/assets/javascripts/admin/addon/components/schema-setting/number-field.gjs
  • app/assets/javascripts/admin/addon/components/schema-setting/types/boolean.gjs
  • app/assets/javascripts/admin/addon/components/report-filters/bool.gjs
  • app/assets/javascripts/admin/addon/components/modal/start-backup.gjs
  • app/assets/javascripts/admin/addon/components/modal/reseed.gjs
  • app/assets/javascripts/admin/addon/components/modal/merge-users-confirmation.gjs
  • app/assets/javascripts/admin/addon/components/modal/delete-posts-confirmation.gjs
  • app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.gjs
  • app/assets/javascripts/admin/addon/components/admin-penalty-similar-users.gjs
  • app/assets/javascripts/admin/addon/components/admin-site-settings-filter-controls.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-show.gjs
  • app/assets/javascripts/admin/addon/components/admin-badges-award.gjs

Note: This list focuses on <Input> usage and is the primary set requiring changes.


Broader audit: files containing the word Input

These files contain Input as a standalone word somewhere in content (may include false-positives such as comments, strings, or unrelated code). Prioritize the list above; use this list for additional spot checks where needed.

  • plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs
  • plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs
  • plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs
  • plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs
  • plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs
  • plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-forms.gjs
  • plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs
  • plugins/discourse-topic-voting/assets/javascripts/discourse/connectors/category-custom-settings/feature-voting-settings.gjs
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/subscribe/show.gjs
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show-plans-show.gjs
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show.gjs
  • plugins/discourse-subscriptions/assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-coupons.gjs
  • plugins/discourse-subscriptions/assets/javascripts/discourse/components/create-coupon-form.gjs
  • plugins/discourse-subscriptions/assets/javascripts/discourse/components/modal/admin-cancel-subscription.gjs
  • plugins/discourse-rss-polling/assets/javascripts/discourse/templates/admin/plugins-rss-polling.gjs
  • plugins/discourse-post-voting/assets/javascripts/discourse/connectors/category-custom-settings/post-voting-category-settings.gjs
  • plugins/discourse-math/public/mathjax/jax/input/AsciiMath/jax.js
  • plugins/discourse-math/public/mathjax/extensions/TeX/AMSmath.js
  • plugins/discourse-math/public/mathjax/extensions/MathMenu.js
  • plugins/discourse-math/public/mathjax/MathJax.2.7.5.js
  • plugins/discourse-graphviz/public/javascripts/viz-3.0.1.js
  • plugins/discourse-gamification/admin/assets/javascripts/admin/components/admin-edit-leaderboard.gjs
  • plugins/discourse-gamification/admin/assets/javascripts/admin/components/admin-create-leaderboard.gjs
  • plugins/discourse-data-explorer/test/javascripts/acceptance/param-input-test.js
  • plugins/discourse-data-explorer/assets/javascripts/discourse/templates/admin/plugins-explorer-queries-details.gjs
  • plugins/discourse-data-explorer/assets/javascripts/discourse/components/param-input-form.gjs
  • plugins/discourse-calendar/assets/javascripts/discourse/connectors/category-custom-settings/show-event-category-sorting-settings.gjs
  • plugins/discourse-calendar/assets/javascripts/discourse/components/modal/post-event-builder.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/templates/user-activity-assigned.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/templates/group/assigned.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/templates/group-assigned-show.gjs
  • plugins/discourse-assign/assets/javascripts/discourse/connectors/category-custom-settings/assign-settings.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/rag-options-fk.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/rag-uploader.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/modal/share-modal.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/modal/ai-llm-quota-modal.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/ai-llm-editor-form.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/ai-embedding-editor.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/ai-persona-tool-options.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/ai-tool-editor-form.gjs
  • plugins/discourse-ai/assets/javascripts/discourse/components/ai-persona-editor.gjs
  • plugins/discourse-adplugin/admin/assets/javascripts/admin/templates/plugins-house-ads-show.gjs
  • plugins/chat/assets/javascripts/discourse/templates/preferences/chat.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/modal/edit-channel-name.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/modal/thread-settings.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/modal/create-channel.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/message-creator/members.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/message-creator/new-group.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat/message-creator/search-input.gjs
  • plugins/chat/assets/javascripts/discourse/components/chat-message.gjs
  • plugins/chat/admin/assets/javascripts/admin/components/chat-incoming-webhook-edit-form.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/topic-trigger.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-date-time-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-boolean-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-pms-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-period-field.gjs
  • plugins/automation/admin/assets/javascripts/admin/components/fields/da-text-field.gjs
  • app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs
  • app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
  • app/assets/javascripts/discourse/tests/integration/components/widgets/render-glimmer-test.js
  • app/assets/javascripts/discourse/tests/integration/components/site-setting-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/object-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/input-group-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-text-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/char-counter-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-number-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/form-test.gjs
  • app/assets/javascripts/discourse/tests/integration/components/form-kit/collection-test.gjs
  • app/assets/javascripts/discourse/tests/acceptance/search-test.js
  • app/assets/javascripts/discourse/app/templates/users.gjs
  • app/assets/javascripts/discourse/app/templates/user/bookmarks.gjs
  • app/assets/javascripts/discourse/app/templates/preferences/profile.gjs
  • app/assets/javascripts/discourse/app/templates/signup.gjs
  • app/assets/javascripts/discourse/app/templates/invites/show.gjs
  • app/assets/javascripts/discourse/app/templates/group-index.gjs
  • app/assets/javascripts/discourse/app/templates/full-page-search.gjs
  • app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs
  • app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs
  • app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs
  • app/assets/javascripts/discourse/app/static/prosemirror/core/inputrules.js
  • app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
  • app/assets/javascripts/discourse/app/components/user-preferences/rename-passkey.gjs
  • app/assets/javascripts/discourse/app/components/username-preference.gjs
  • app/assets/javascripts/discourse/app/components/user-fields/text.gjs
  • app/assets/javascripts/discourse/app/components/user-fields/confirm.gjs
  • app/assets/javascripts/discourse/app/components/tag-groups-form.gjs
  • app/assets/javascripts/discourse/app/components/time-shortcut-picker.gjs
  • app/assets/javascripts/discourse/app/components/sidebar/section-link.gjs
  • app/assets/javascripts/discourse/app/components/sidebar/section-form-link.gjs
  • app/assets/javascripts/discourse/app/components/search-advanced-options.gjs
  • app/assets/javascripts/discourse/app/components/preference-checkbox.gjs
  • app/assets/javascripts/discourse/app/components/reviewable-field-text.gjs
  • app/assets/javascripts/discourse/app/components/modal/user-status.gjs
  • app/assets/javascripts/discourse/app/components/modal/upsert-hyperlink.gjs
  • app/assets/javascripts/discourse/app/components/modal/reject-reason-reviewable.gjs
  • app/assets/javascripts/discourse/app/components/modal/second-factor-edit.gjs
  • app/assets/javascripts/discourse/app/components/modal/publish-page.gjs
  • app/assets/javascripts/discourse/app/components/modal/share-topic.gjs
  • app/assets/javascripts/discourse/app/components/modal/jump-to-post.gjs
  • app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.gjs
  • app/assets/javascripts/discourse/app/components/modal/revise-and-reject-post-reviewable.gjs
  • app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.gjs
  • app/assets/javascripts/discourse/app/components/modal/second-factor-add-security-key.gjs
  • app/assets/javascripts/discourse/app/components/modal/move-to-topic.gjs
  • app/assets/javascripts/discourse/app/components/modal/change-timestamp.gjs
  • app/assets/javascripts/discourse/app/components/modal/group-add-members.gjs
  • app/assets/javascripts/discourse/app/components/modal/edit-slow-mode.gjs
  • app/assets/javascripts/discourse/app/components/modal/bulk-topic-actions.gjs
  • app/assets/javascripts/discourse/app/components/modal/create-invite.gjs
  • app/assets/javascripts/discourse/app/components/modal/bookmark.gjs
  • app/assets/javascripts/discourse/app/components/modal/edit-user-directory-columns.gjs
  • app/assets/javascripts/discourse/app/components/modal/download-calendar.gjs
  • app/assets/javascripts/discourse/app/components/local-login-form.gjs
  • app/assets/javascripts/discourse/app/components/groups-form-membership-fields.gjs
  • app/assets/javascripts/discourse/app/components/form-template-field/input.gjs
  • app/assets/javascripts/discourse/app/components/groups-form-interaction-fields.gjs
  • app/assets/javascripts/discourse/app/components/future-date-input.gjs
  • app/assets/javascripts/discourse/app/components/group-list.gjs
  • app/assets/javascripts/discourse/app/components/group-smtp-email-settings.gjs
  • app/assets/javascripts/discourse/app/components/group-manage-email-settings.gjs
  • app/assets/javascripts/discourse/app/components/group-imap-email-settings.gjs
  • app/assets/javascripts/discourse/app/components/form-template-field/checkbox.gjs
  • app/assets/javascripts/discourse/app/components/flag-action-type.gjs
  • app/assets/javascripts/discourse/app/components/edit-category-general.gjs
  • app/assets/javascripts/discourse/app/components/edit-category-settings.gjs
  • app/assets/javascripts/discourse/app/components/edit-category-tags.gjs
  • app/assets/javascripts/discourse/app/components/edit-category-localizations.gjs
  • app/assets/javascripts/discourse/app/components/date-picker.gjs
  • app/assets/javascripts/discourse/app/components/dialog-messages/confirm-session.gjs
  • app/assets/javascripts/discourse/app/components/date-input.gjs
  • app/assets/javascripts/discourse/app/components/d-multi-select.gjs
  • app/assets/javascripts/discourse/app/components/composer-container.gjs
  • app/assets/javascripts/discourse/app/components/calendar-date-time-input.gjs
  • app/assets/javascripts/admin/addon/templates/watched-words-action.gjs
  • app/assets/javascripts/admin/addon/templates/user-badges.gjs
  • app/assets/javascripts/admin/addon/templates/embedding-posts-and-topics.gjs
  • app/assets/javascripts/admin/addon/templates/email-templates-edit.gjs
  • app/assets/javascripts/admin/addon/templates/embedding-crawlers.gjs
  • app/assets/javascripts/admin/addon/templates/customize-colors-show.gjs
  • app/assets/javascripts/admin/addon/components/site-settings/string.gjs
  • app/assets/javascripts/admin/addon/components/themes-list-item.gjs
  • app/assets/javascripts/admin/addon/components/webhook-event-chooser.gjs
  • app/assets/javascripts/admin/addon/components/value-list.gjs
  • app/assets/javascripts/admin/addon/components/watched-word-form.gjs
  • app/assets/javascripts/admin/addon/components/theme-upload-add.gjs
  • app/assets/javascripts/admin/addon/components/schema-setting/types/string.gjs
  • app/assets/javascripts/admin/addon/components/simple-list.gjs
  • app/assets/javascripts/admin/addon/components/secret-value-list.gjs
  • app/assets/javascripts/admin/addon/components/schema-setting/number-field.gjs
  • app/assets/javascripts/admin/addon/components/schema-setting/types/boolean.gjs
  • app/assets/javascripts/admin/addon/components/report-filters/bool.gjs
  • app/assets/javascripts/admin/addon/components/modal/start-backup.gjs
  • app/assets/javascripts/admin/addon/components/modal/reseed.gjs
  • app/assets/javascripts/admin/addon/components/modal/merge-users-confirmation.gjs
  • app/assets/javascripts/admin/addon/components/modal/delete-posts-confirmation.gjs
  • app/assets/javascripts/admin/addon/components/modal/edit-badge-groupings.gjs
  • app/assets/javascripts/admin/addon/components/emoji-uploader.gjs
  • app/assets/javascripts/admin/addon/components/admin-penalty-similar-users.gjs
  • app/assets/javascripts/admin/addon/components/admin-site-settings-filter-controls.gjs
  • app/assets/javascripts/admin/addon/components/admin-permalink-form.gjs
  • app/assets/javascripts/admin/addon/components/admin-user-fields-form.gjs
  • app/assets/javascripts/admin/addon/components/admin-flags-form.gjs
  • app/assets/javascripts/admin/addon/components/admin-theme-editor.gjs
  • app/assets/javascripts/admin/addon/components/admin-embedding-host-form.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-areas/color-palette.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-show.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/extra-groups.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/your-organization.gjs
  • app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/contact-information.gjs
  • app/assets/javascripts/admin/addon/components/admin-badges-award.gjs
  • app/assets/javascripts/admin/addon/components/admin-badges-show.gjs

Conversion rules and examples

General rules:

  • Replace <Input ...> with <input ...>.
  • Map attributes directly: @type → type, @value → value, @placeholder → placeholder, @disabled → disabled, @name → name, @id → id, @maxlength → maxlength, @min → min, @max → max, @step → step, @autocomplete → autocomplete, @autofocus → autofocus, @class → class.
  • Replace @input, @change, @focus-in, @focus-out, @keyUp, @keyDown with {{on "input" ...}}, {{on "change" ...}}, {{on "focusin" ...}}, {{on "focusout" ...}}, {{on "keyup" ...}}, {{on "keydown" ...}} respectively.
  • If the old <Input> relied on two-way binding of @value, you must now set the value and handle updates yourself in an event handler.
  • For checkbox/radio, use checked={{...}} and update from event.target.checked on change.
  • If you used @enter or @escape-press, switch to a keydown handler and branch on event.key.
  • Keep all display strings translatable and unchanged (use existing i18n calls).

Text-like inputs

Before:

<Input @type="text" @value={{this.name}} @placeholder={{i18n "user.name"}} @enter={{this.save}} />

After:

<input type="text" value={{this.name}} placeholder={{i18n "user.name"}} {{on "input" this.onNameInput}} {{on "keydown" this.onNameKeydown}} />

Backing class:

@action onNameInput(event) {
  this.name = event.target.value;
}

@action onNameKeydown(event) {
  if (event.key === "Enter") {
    this.save();
  }
}

Number inputs

Before:

<Input @type="number" @value={{this.count}} @min={{0}} @step={{1}} />

After:

<input type="number" value={{this.count}} min={{0}} step={{1}} {{on "input" this.onCountInput}} />

Backing class:

@action onCountInput(event) {
  this.count = Number(event.target.value || 0);
}

Checkbox

Before:

<Input @type="checkbox" @checked={{this.enabled}} />

After:

<input type="checkbox" checked={{this.enabled}} {{on "change" this.onEnabledChange}} />

Backing class:

@action onEnabledChange(event) {
  this.enabled = event.target.checked;
}

Radio

Before:

<Input @type="radio" @checked={{eq this.choice "a"}} @name="choice" @value="a" />

After:

<input type="radio" name="choice" value="a" checked={{eq this.choice "a"}} {{on "change" this.onChoiceChange}} />

Backing class:

@action onChoiceChange(event) {
  this.choice = event.target.value;
}

Password / Email / Date / Time

  • Use the appropriate type attribute (password, email, date, time, etc.).
  • Handle updates via input or change depending on UX needs, using event.target.value.

File inputs

Before:

<Input @type="file" @change={{this.onFile}} />

After:

<input type="file" {{on "change" this.onFile}} />

Handler:

@action onFile(event) {
  const files = event.target.files; // FileList
  // handle files
}

Focus handling

  • @autofocusautofocus attribute, or programmatic focus with {{did-insert this.focusInput}}.

Keyboard helpers (Enter/Escape)

<input {{on "keydown" this.onKeydown}} />
@action onKeydown(event) {
  if (event.key === "Enter") {
    this.onEnter?.();
  } else if (event.key === "Escape") {
    this.onEscape?.();
  }
}

Testing notes

  • Acceptance/Integration tests that previously relied on @enter should simulate keydown with Enter on the <input> element.
  • For value changes, trigger input events and assert bound state changes via your handlers.

Migration checklist per file

  • Replace <Input ...> with <input ...> and map attributes.
  • Add {{on ...}} handlers for updates and key handling.
  • Update backing classes with @action handlers that write to tracked state.
  • Manually handle two-way binding behavior (event.target.value / .checked).
  • Remove any unused imports left over from the old implementation (for example, if a backing class imported an Input component wrapper or helpers used only for <Input>). The linter will flag these; delete them to keep files clean.
  • Run linters and relevant tests.

Run linters for recent changes:

bin/lint --fix --recent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment