Hidden field is being typed into even when it is hidden

Design help General
1

Hello everyone, having a strange issue here. We have a form which the fields are determined by the toggle button - License Plate / VIN - and they are technically layered on top of each other.

By default, it is toggled to the ‘License Plate’ option, which hides the ‘VIN’ field and shows the ‘License Plate’ text field and ‘State’ drop down. When the ‘VIN’ toggle is selected, it hides the ‘license plate’ text field and ‘state’ drop down and displays the ‘VIN’ text field.

The problem i’m facing is that when you click to type within the ‘VIN’ field, it is still registering that I’m clicking into the ‘License Plate’ field and displaying the text in that text field even though the field should be hidden.

What can I do to make sure the hidden fields are actually hidden rather than just ‘invisible’?

Here’s a loom to help explain what I’m experiencing: Loom | Free Screen & Video Recording Software | Loom

Here’s the read only link: Webflow - SnapAutos

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Bryan, you’ve got a few things setup unusually with your interactions however the main problem here is that you’re using opacity: 0% to hide it. You need to use the Hide/Show action instead.

3

@Bryan_Barber there are multiple issues in the structure and you are also using minus margin and positions in the structure.

4

Thanks everyone. I reconstructed it using the hide/show interactions and it’s working much better.