Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DOC] Added on modifier example to the input component #19205

Closed
wants to merge 1 commit into from
Closed

[DOC] Added on modifier example to the input component #19205

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/@ember/-internals/glimmer/lib/components/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,13 @@ import InternalComponent from './internal';

### Actions
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Actions
### Events


The `Input` component takes a number of arguments with callbacks that are invoked in response to
There are multiple ways to pass actions to the input component. Starting with Ember Octane, we recommend using the `{{on}}` modifier to call an action on specific events such as the input event.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
There are multiple ways to pass actions to the input component. Starting with Ember Octane, we recommend using the `{{on}}` modifier to call an action on specific events such as the input event.
The recommended way of handling DOM events is to use the `{{on}}` modifier. For example, to specify a callback for the `input` event:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we cross link to the documentation for the on modifier if that's available?


```handlebars
<Input @value={{this.name}} {{on "input" this.validateName}} />
```

The `Input` component also takes a number of arguments with callbacks that are invoked in response to
user events.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
user events.
other events.


* `enter`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* `enter`
* `enter` (synthetic event)

IMO we should do this for this for all the synthetic events and at the end of the list mention what they are (something along the lines of "Some of these do not correspond to a DOM event. Instead, they are synthetic/logical events that are fired by the Input component when a high-level user action is take (such as pressing the Enter key).")

Expand Down