Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (32) x64 AMD EPYC 7763 64-Core Processor
    Memory: 80.74 GB / 125.78 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh

Are you reporting Accessibility issue?

no

Reproduction

https://react.fluentui.dev/?path=/docs/components-input--default

Bug Description

The Input control has areas surrounding the underlying input element, and clicking on these areas does not bring focus to the input control. This is unlike the native control, where the entire area of the control is clickable.

Repro:
Open https://react.fluentui.dev/?path=/docs/components-input--default
Use the mouse to click inside the Input control sample, very close to the border.

Actual Behavior

Control does not receive focus when click happens near the borders (when mouse pointer is still an arrow).

Expected Behavior

Control should receive focus when clicked anywhere inside its outer border.

Additional information

The mouse pointer is a clue if you are hovering over an area that will bring focus to the input control or not - if it remains an arrow, it won't bring focus; if it switches to the text cursor, then we're actually on top of the underlying input element and clicking will bring focus to the control.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.