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.

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

fix(select): emit single ionChange event for popover option selection #26796

Merged
merged 12 commits into from
Feb 21, 2023

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Feb 14, 2023

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
    • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

  • When using ion-select with interface="popover", selecting an option will result in a duplicate emission of the ionChange event.
  • Selecting an existing selected option with the keyboard, does not dismiss the parent popover.

The duplicate emission issue spawns from: #23474

The root problem was that we had both a click handler on the radio and a @Listen decorator for ionChange, both invoking the callback handler for the popover options. When a radio is selected, it would fire the click handler directly attached to the element and then the ion-radio-group would fire an ionChange event, additionally executing the callback handler (again).

Issue URL: Resolves #26789 (this issue is resolved as a result, but the problem is existent with a basic implementation in v7 beta).

What is the new behavior?

  • <ion-select interface="popover"> emits a single ionChange event when an option is selected from single selection
  • Resolves any types within the SelectPopover class
  • Selecting an existing selected option with the keyboard (space or enter key) will dismiss the popover (aligning with click behavior and browser behavior with select)
  • Filled in UX tests for when the popover should dismiss from interaction within ion-select-popover
  • Updates the legacy form syntax warning on ion-checkbox to include information for developers to use the legacy prop if they require the legacy form template

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev-build: 7.0.0-dev.11676402953.118c3b36

@stackblitz
Copy link

stackblitz bot commented Feb 14, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions bot added the package: core @ionic/core package label Feb 14, 2023
@sean-perkins sean-perkins marked this pull request as ready for review February 14, 2023 19:50
@sean-perkins sean-perkins requested a review from a team as a code owner February 14, 2023 19:50
@sean-perkins
Copy link
Contributor Author

Not a huge fan of the PR title, open to ideas.

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Can you add some more context as to why the proposed fix works? Also, why did we only change ion-checkbox and not ion-radio?

For checkboxes that do not render the label immediately next to the checkbox, developers may continue to use "ion-label" but must manually associate the label with the checkbox by using "aria-labelledby".`,
For checkboxes that do not render the label immediately next to the checkbox, developers may continue to use "ion-label" but must manually associate the label with the checkbox by using "aria-labelledby".

Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

If we are good with the wording here, I can follow-up with another PR to apply across all form controls for v7.

Copy link
Contributor

Choose a reason for hiding this comment

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

Looks good 👍

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Great job!

@sean-perkins sean-perkins merged commit 7578aa3 into feature-7.0 Feb 21, 2023
@sean-perkins sean-perkins deleted the fix/select-popover-duplicate-change-events branch February 21, 2023 01:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants