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
- The target is usages of the Ember built-in
<Input ...>component in templates (.gjs,.jsGlimmer 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.
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.
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
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,@keyDownwith{{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 fromevent.target.checkedonchange. - If you used
@enteror@escape-press, switch to akeydownhandler and branch onevent.key. - Keep all display strings translatable and unchanged (use existing
i18ncalls).
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();
}
}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);
}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;
}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;
}- Use the appropriate
typeattribute (password,email,date,time, etc.). - Handle updates via
inputorchangedepending on UX needs, usingevent.target.value.
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
}@autofocus→autofocusattribute, or programmatic focus with{{did-insert this.focusInput}}.
<input {{on "keydown" this.onKeydown}} />@action onKeydown(event) {
if (event.key === "Enter") {
this.onEnter?.();
} else if (event.key === "Escape") {
this.onEscape?.();
}
}- Acceptance/Integration tests that previously relied on
@entershould simulatekeydownwithEnteron the<input>element. - For value changes, trigger
inputevents and assert bound state changes via your handlers.
- Replace
<Input ...>with<input ...>and map attributes. - Add
{{on ...}}handlers for updates and key handling. - Update backing classes with
@actionhandlers 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
Inputcomponent 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