calcite-design-system
calcite-design-system copied to clipboard
Esri
Calcite-input can lose focus when next to slider in certain scenario
Actual Behavior
To reproduce: Go to highlight the input value, drag the mouse outside of the input box and release the mouse select button and you see the slider get highlighted and input box loses focus
Expected Behavior
The focus should remain on the input.
Reproduction Sample
Map Viewer Sketch Pane
https://codepen.io/jcfranco/pen/wvmxJvG?editors=1010
Reproduction Steps
To reproduce: Go to highlight the input value, drag the mouse outside of the input box and release the mouse select button and you see the slider get highlighted and input box loses focus
Reproduction Version
latest
Relevant Info
No response
Regression?
No response
It looks like this issue is missing some information:
- A codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible.
Issues without reproduction samples may not be prioritized. If you were unable to create a sample, please try to answer any questions that arise once development begins. Thanks for your understanding.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I believe this is a wrapping-component issue and not specific to Calcite. I should know because I created it. 😂 In any case, I'll dig into it and will close this one my hunch is correct.
Quick update: After digging into this, I think it's best if we update label to not assume there will only be one labelable. For comparison, browsers only focus on the first labelable and ignore the rest.
I noticed the same issue in ArcGIS Charts app. It's similar to this issue. When I try to click on calcite-input element, the focus shifts to nearby calcite-slider element. Both of these elements are inside calcite-label element. Here is the code-pen used for the issue repro - https://codepen.io/apahadi73/pen/JjaELpW.
See findings from https://github.com/Esri/calcite-components/issues/7085#issuecomment-1572890663
Mhh, I can still reproduce it using the codepen with 1.7.0 and 1.9.2.
Click on the input box and hold the mouse button then move the mouse over the slider line and release the mouse button. Now the slider button is in focus.
Mhh, I can still reproduce it using the codepen with 1.7.0 and 1.9.2.
Click on the input box and hold the mouse button then move the mouse over the slider line and release the mouse button. Now the slider button is in focus.
@AdelheidF Thanks for getting this back on our radar!
The fix above was aimed to mitigate having the first element gain, or steal, focus from other wrapped elements. Since focus is handled within Calcite we've opened #8038 to investigate if a more advanced solution can be applied across browsers. Closing out the above issue, which was mitigated, in favor of the #8038 follow-up issue.
cc: @jcfranco