saas-js / saas-ui

The React component library for startups, built with Chakra UI.
https://saas-ui.dev
MIT License
1.23k stars 118 forks source link

Select inside form does not update state on first change #238

Open benmcginnis opened 3 weeks ago

benmcginnis commented 3 weeks ago

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

Additional Information

No response

linear[bot] commented 3 weeks ago

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

Pagebakers commented 3 weeks ago

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.