Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Close popup when checked item is clicked. #52

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

Merged
merged 4 commits into from
Aug 12, 2021

Conversation

pablonete
Copy link
Contributor

We rely on change to commit the click on radio inputs, but change event won't happen if the item is already checked so shortcutting in that case to commit directly and close the menu.

We rely on change to commit the click, but change event won't happen if the item is already checked so shortcutting in that case to commit directly and close the menu.
@pablonete pablonete requested a review from a team as a code owner August 9, 2021 12:05
@srt32
Copy link
Member

srt32 commented Aug 9, 2021

The failing test looks like something we should investigate. I think we're duplicating events now, perhaps?

FAILED TESTS:
  details-menu element
    mutually exclusive menu items as labels
      ✖ manages checked state and fires events
        Chrome Headless 92.0.4515.131 (Linux x86_64)
      AssertionError: selected event is fired once: expected 2 to equal 1
          at Context.<anonymous> (test.js:315:14)

@koddsson
Copy link
Contributor

Could you add a test for the markup that is buggy?

This not only duplicates the details-menu-selected event but it also uses an updated input (so if it was not checked in the first event, it is already checked inthe echoed event).
@pablonete
Copy link
Contributor Author

@srt32 @koddsson The old logic ignored all the click events when inputs were nested in labels, so it wasn't clear that there were 2 of them, and my logic should only care of one and discard the second.

The problem is that a label with a nested input will get the click event twice, once directly and a second one bubbling up from the input (the label always propagates clicks to the input it stands for). stopPropagation wasn't useful preventing this second event, so I added a condition to return if the event is coming from inside a label but not the label itself, as that's always echo.
This was even more necessary because the input mutated in between, that's the reason my logic caused a double event: it is not checked yet in the first event (target: label), but it is already checked as a response to the click in the echoed event (target: input).

Copy link
Contributor

@koddsson koddsson left a comment

Choose a reason for hiding this comment

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

This looks good to me 👍🏻

@koddsson koddsson merged commit f4644c0 into main Aug 12, 2021
@koddsson koddsson deleted the close-popup-on-checked-clicked branch August 12, 2021 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants