Hi guys. I’m having some very weird behaviour with the selects, forms, and tabbing through them. In the video attached you see the problem when I tab through forms that are in the same grid. After using the select component and pressing tab to jump to the next input field, it does not behave as expected. Both selects around the second input field get highlighted. Can anybody help me fix this? Happens in preview and production.
For anyone interested: The trigger element inside the plasmic-select had its html tag set to “div” instead of “button”. Changing it back fixed it.
@tiago turns out that this sadly solved the issue only partially. The focus now works as expected, but it generates invalid DOM as there are nested buttons. Inspecting the select element, we see that the second button comes from the customTriggerWrapper variant. However, this should be an unused, empty slot that even is hidden. How can we prevent rendering two buttons?
Our project URL is https://studio.plasmic.app/projects/mqAqufVw1Tm6ZHyrufFb4Y and the selects resulting in invalid html are in 010 - Erfassung - Simpel
I temporarily switched the trigger back to div to be able to sync for the moment. Using button did not get through our CI due to the raised React error
customTriggerWrapper is currently set to “not visible” instead of “not rendered”, which means the DOM will still be rendered, but hidden with display:none in css. The offending Select (HeizHauptEnerTrKat) does indeed have a Button set in the custom trigger slot, and so that Button is getting rendered.
You can set customTriggerWrapper in Select to be “Not rendered” instead
Thank you for your help. We’ve changed it to not rendered. However, since yesterday, we now have another error when clicking on/expanding the NavProfileDropdown… I reset the NavProfileDropdown and the Select component and re-synced freshly from Plasmic to ensure that its not custom code inside of the components. Do you maybe know what causes this?
