search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.46k stars 253 forks source link

input: The should not be multiple tab stops for a Single ui component #9303

Open pppwr7 opened 2 days ago

pppwr7 commented 2 days ago

Describe the bug

For Input field with interactive icon added, if the current focus is on the input field then on tab key press the focus moves to the interactive icon. As per the UX guideline, for any UI only 1 tab stop should be provided. This issue has been raised by the UX colleague.

Isolated Example

https://stackblitz.com/edit/github-zbkxaj?file=src%2FApp.tsx

Reproduction steps

  1. open https://stackblitz.com/edit/github-zbkxaj?file=src%2FApp.tsx
  2. keep the focus on input field
  3. hit tab key and see that the icon as well as the input box is focused. Ideally, the control should move to next component away from the input field

Expected Behaviour

should be focussed aut of the input field on tab press

Screenshots or Videos

No response

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 2 days ago

Hi @pppwr7

this seems like the same issue that you opened about one month ago, so I'm closing this as duplicate.

Also, if you want to render a clear button inside of it, why don't you use the showClearButton prop? This way there's no focus on the button and the button is styled according to specs.

Duplicate of https://github.com/SAP/ui5-webcomponents/issues/8970

pppwr7 commented 2 days ago

Hi Lukas742 We have usecase to show search as the icon and on click of it ,we have to fire a call to get the data. I have create 2 issues, one for the tab press and another for the double focus.

Lukas742 commented 2 days ago

If the focus is received via tabbing or by clicking is basically the same behavior, so in my opinion this is the same issue. If you feel like this should be handled separately, I can still transfer this issue to the ui5-webcomponents repo, so our colleagues there can decide how to handle it.

pppwr7 commented 2 days ago

Hi Lukas742 Please transfer it to the ui5-webcomponents repo. I see that there is a different component for this usecase called SearchField refer https://ui5.sap.com//#/entity/sap.m.SearchField/sample/sap.m.sample.SearchField. The behavior is also as we expect in our usecase - no double focus, no tabbing into the search icon. We need the similar behavior in input control provided for the react side.

kineticjs commented 1 day ago

Hi @pppwr7 ,

Is it correct that you need the ui5-input allow the following behavior: https://stackblitz.com/edit/github-zbkxaj-bpbemb?file=src%2FApp.tsx

I edited your original sample to make the icon non-interactive but the app is still notified when the user clicks on the icon. Is this basically the expected behavior?

Thanks