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

[Bug]: SWC Picker autofocus does not show focus ring when navigating via mouse #4671

Open
1 task done
datle-Adobe opened this issue Aug 14, 2024 · 0 comments
Open
1 task done
Labels
bug Something isn't working needs jira ticket triage An issue needing triage

Comments

@datle-Adobe
Copy link

Code of conduct

  • I agree to follow this project's code of conduct.

Impacted component(s)

SWC Picker

Expected behavior

When navigating to Picker via keyboard and autofocus property is set to true, I should see the focus ring. This is consistent with SWC Textfield when the same property is set

Actual behavior

When navigating to Picker via keyboard and autofocus property is set to true, I don't see the focus ring

Screenshots

Using this link: https://studio.webcomponents.dev/edit/q4K3CJcbrJcFIr8gildQ/src/index.ts?p=stories
Screen Recording 2024-08-14 at 1 09 30 PM

What browsers are you seeing the problem in?

Chrome, Safari

How can we reproduce this issue?

  1. Go to https://studio.webcomponents.dev/edit/q4K3CJcbrJcFIr8gildQ/src/index.ts?p=stories
  2. Click on 'Dialog with autofocus select' button
  3. See the error where the focus ring is not visible even though it's focused

Sample code or abstract reproduction which illustrates the problem

The same code below can be found in https://studio.webcomponents.dev/edit/q4K3CJcbrJcFIr8gildQ/src/index.ts?p=stories

<overlay-trigger type="modal">
          <sp-dialog-wrapper
              slot="click-content"
              underlay
              headline="Dialog title"
              mode="fullscreen"
              confirm-label="Keep Both"
              secondary-label="Replace"
              cancel-label="Cancel"
              footer="Content for footer"
          >
            <sp-field-label for="picker-m" size="m">Selection type:</sp-field-label>
            <sp-picker id="picker-1" size="m" label="Selection type" autofocus>
              <sp-menu-item>Deselect</sp-menu-item>
              <sp-menu-item>Select inverse</sp-menu-item>
              <sp-menu-item>Feather...</sp-menu-item>
              <sp-menu-item>Select and mask...</sp-menu-item>
              <sp-menu-divider></sp-menu-divider>
              <sp-menu-item>Save selection</sp-menu-item>
              <sp-menu-item disabled>Make work path</sp-menu-item>
            </sp-picker>
          </sp-dialog-wrapper>
          <sp-button
              slot="trigger"
          >
              Dialog with autofocus select
          </sp-button>
        </overlay-trigger>

Severity

SEV 3

Logs taken while reproducing problem

No response

@datle-Adobe datle-Adobe added bug Something isn't working needs jira ticket triage An issue needing triage labels Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs jira ticket triage An issue needing triage
Projects
None yet
Development

No branches or pull requests

1 participant