[Bug]: SpinButton up/down buttons active when readOnly is set

[NewYanko]

Component

SpinButton

Package version

9.72.7

React version

19.1.1

Environment

System:
    OS: macOS 26.1
    CPU: (8) arm64 Apple M1
    Memory: 153.20 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 142.0.7444.176
    Safari: 26.1
  npmPackages:
    @fluentui/react-charts: ^9.3.3 => 9.3.3 
    @fluentui/react-components: ^9.72.7 => 9.72.7 
    @fluentui/react-datepicker-compat: ^0.6.18 => 0.6.18 
    @types/react: ^19.1.13 => 19.2.2 
    @types/react-dom: ^19.1.9 => 19.2.2 
    react: ^19.1.1 => 19.2.0 
    react-dom: ^19.1.1 => 19.2.0

Current Behavior

When the readOnly prop is set, I cannot type in a new value in the SpinButton. However, if i click either the up or down arrow buttons, the value is changed.

Expected Behavior

Unless this is an intended feature, the up and down arrow buttons should not change the value of the input, just like in disabled.
The current readOnly implementation is a mix of default and disabled - the input cannot be changed directly (by typing), but it's values can be adjusted via buttons!

Reproduction

https://stackblitz.com/edit/bwtwmsso?file=src%2Fexample.tsx

Steps to reproduce

1. Click the ↑ or ↓ buttons on the readOnly SpinButton
2. Watch the values change

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

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.

[NewYanko]

Additionally, it seems like since the readOnly SpinButton is focusable (as it should be), using the ↑ or ↓ keys on the keyboard has the same effect: the value is changed.

[dmytrokirpa]

Right now, the SpinButton component doesn't have its own readOnly logic - the readOnly prop just gets passed to the input slot and only makes the input field itself read-only. So, it might be a good idea to also disable/hide the buttons when readOnly is set, and turn off the keyboard up/down value changes too.

[NewYanko]

I'm using it with a controlled value & onOptionSelect, so I can just not set the value when readOnly is enabled :)
But it'd be great if the component could do it by itself, for it to play nicely in more broad applications. Thanks for taking a look!