Skip to content

Pass the selected value(s) as the first parameter to @change #30

@pzuraq

Description

@pzuraq

Is your feature request related to a problem? Please describe.

When using <SelectLight>, currently you must always handle the change event yourself. This means that you must create a JavaScript event handler to update the value, like so:

<SelectLight
  @value={{this.selected}}
  @options={{array "turtle" "tortoise"}}
  @change={{this.handleChange}} 
/>
class MyComponent extends Component {
  @tracked selected = "turtle";

  handleChange = (event) => {
    this.selected = event.target.selectedOptions[0].value;
  };
}

This is a lot of boilerplate to write, and also means that you can't use a conventional solution like ember-set-helper or {{mut}} to update a value with this component.

Describe the solution you'd like

Instead of passing the event as the first value to @change, I think it would be better to pass the value of the newly selected option (or options if there are multiple):

class MyComponent extends Component {
  @tracked selected = "turtle";

  handleChange = (value, event) => {
    this.selected = value;
  };
}

This could be used conventionally with {{set}} from ember-set-helper like so:

<SelectLight
  @value={{this.selected}}
  @options={{array "turtle" "tortoise"}}
  @change={{set this "selected"}} 
/>

I think the event could still be provided as the second parameter, there are definitely cases where the user may want to do something a bit more custom and may need access to the original event.

Describe alternatives you've considered

This could possibly be provided as a separate API, @changeValue (name is definitely bikesheddable), but IMO this would be a bit confusing, since there would be multiple event handlers at that point.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions