Select inside form does not update state on first change

[benmcginnis]

Description

When using a 'select' field type inside a form with a<SubmitButton disableIfUntouched disableIfInvalid>{'Update'}</SubmitButton> , changing the select doesn't change the form state the first time you do it. You have to change the select again before the submit button is enabled.

Link to Reproduction

https://codesandbox.io/p/sandbox/gracious-sky-4xfg92?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxdk04xv00063b6gkopidutx%2522%252C%2522sizes%2522%253A%255Bnull%252Cnull%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxdk04xv00023b6gm793p8ke%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxdk04xv00033b6glod3kexh%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxdk04xv00053b6gncopdkw5%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxdk04xv00023b6gm793p8ke%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxdk04xv00013b6gc979nb7k%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clxdk04xv00023b6gm793p8ke%2522%252C%2522activeTabId%2522%253A%2522clxdk04xv00013b6gc979nb7k%2522%257D%252C%2522clxdk04xv00053b6gncopdkw5%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxdk04xv00043b6gigpazbyw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clxdk04xv00053b6gncopdkw5%2522%252C%2522activeTabId%2522%253A%2522clxdk04xv00043b6gigpazbyw%2522%257D%252C%2522clxdk04xv00033b6glod3kexh%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clxdk04xv00033b6glod3kexh%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

1. Change the Select to another value
2. See that the submit button is still disabled
3. change the select value again
4. see that the submit button is now enabled

Saas UI Version

2.5.8

Chakra UI Version

2.8.2

Browser

Google Chrome 125

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[linear]

SUI-497 Select inside form does not update state on first change

[Pagebakers]

Weird, onChange is triggered, but it seems like the field stays untouched.

The touched state isn't updated in your example, but i can't reproduce it in the storybooks.