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

Jump to bottom

fix(kinput): prevent focus loss on icon/button click #2453

Merged
merged 3 commits into from
Oct 15, 2024
Merged

fix(kinput): prevent focus loss on icon/button click #2453

merged 3 commits into from
Oct 15, 2024

Conversation

Justineo
Copy link
Contributor

Summary

Fixed issue where clicking icons/buttons inside an input caused focus loss. This PR ensures the input remains focused.

Before:

Oct-13-2024 01-04-21
Oct-13-2024 01-04-36

After:

Oct-13-2024 01-04-27
Oct-13-2024 01-04-31

@netlify Netlify
Copy link

netlify bot commented Oct 12, 2024 •
edited
Loading

✅ Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit b9d2233
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/670df38f169ed800088658e1
😎 Deploy Preview https://deploy-preview-2453--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Oct 12, 2024 •
edited
Loading

✅ Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit b9d2233
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/670df38fa408440008d712cc
😎 Deploy Preview https://deploy-preview-2453--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Justineo
Justineo commented Oct 12, 2024
View reviewed changes
src/components/KInput/KInput.vue
@@ -51,6 +51,8 @@
:aria-label="`${maskValue ? 'Hide' : 'Show'} value`"
class="mask-value-toggle-button"
@click.stop="maskValue = !maskValue"
@mousedown.prevent
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This makes the input stay focusd.

src/components/KInput/KInput.vue
@@ -51,6 +51,8 @@
:aria-label="`${maskValue ? 'Hide' : 'Show'} value`"
class="mask-value-toggle-button"
@click.stop="maskValue = !maskValue"
@mousedown.prevent
@mouseup.prevent
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This keeps the cursor position.

src/components/KInput/KInput.cy.ts
cy.get('.k-input .mask-value-toggle-button').click()
cy.get('.k-input input').should('have.attr', 'type', 'text')
cy.get('.k-input .mask-value-toggle-button').click()
cy.get('.k-input input').should('have.attr', 'type', 'password')

cy.get('.k-input input').should('have.attr', 'type', 'password').should('be.focused')
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note: in real user interactions, mouseup moves the input cursor to the start position, but I couldn't reproduce this behavior in test cases, so this part of the test is not included.

@Justineo Justineo marked this pull request as draft October 12, 2024 17:27
@Justineo
Copy link
Contributor Author

Temporarily blocked by an unexpected usage according to the docs. Should fix that first.

If you want to make an icon clickable, you must assign role="button" and tabindex="0" attributes to that element and bind an event handler. KBadge will take care of state styling (hover, focus, disabled).

@Justineo Justineo marked this pull request as ready for review October 15, 2024 04:45
portikM
portikM approved these changes Oct 15, 2024
View reviewed changes
Copy link
Member

@portikM portikM left a comment

Choose a reason for hiding this comment

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

LGTM 🚀

@Justineo Justineo merged commit c536de7 into main Oct 15, 2024
11 checks passed
@Justineo Justineo deleted the fix/kinput-focus branch October 15, 2024 15:49
kongponents-bot pushed a commit that referenced this pull request Oct 15, 2024
@semantic-release-bot
chore(release): 9.11.5 [skip ci]
be5df2d 
## [9.11.5](v9.11.4...v9.11.5) (2024-10-15)

### Bug Fixes

* **kinput:** prevent focus loss on icon/button click ([#2453](#2453)) ([c536de7](c536de7))
* **klabel:** fix aria attributes on tooltip icon ([#2454](#2454)) ([7201572](7201572))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 9.11.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

@kongponents-bot
Copy link
Collaborator

Preview package from this PR in consuming application

In consuming application project install preview version of kongponents generated by this PR:

@kong/kongponents@pr-2453

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@portikM portikM portikM approved these changes

@adamdehaven adamdehaven Awaiting requested review from adamdehaven adamdehaven is a code owner

@jillztom jillztom Awaiting requested review from jillztom jillztom is a code owner

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Justineo @kongponents-bot @portikM