Input with interactions to also open an overlay

Question

Hi, Im struggling to get my component wiring up quite right whilst also firing an overlay, any help for the solution or workaround would be great.
I have an input with 3 states, Default, hover and focus.
Default > Hover = while hovering
Hover > Focus = while pressiing
Focus > = onClick (Open Overlay)
Then in the prototype, im setting the onClick to open the overlay i want. When im doing this the hover is working and the on press is firing as I can see the added stroke but the click isn’t firing the overlay.
It does work however if i set the state on the input to focus straight away.
Seems to be getting into a mess when it is going from default to hover to onpress focus all together.
Been pulling my hair out so any advice be amazing thanks! Hope supporting images help.

Kevin_Mitchell · Accepted Answer

Hey Visal, Thanks for taking your time on this, you definitely set me on the right path and ive now got a working solution. I was still having issues handling the overlay interaction from within the input component itself, so I decided to let the component handle its own states from defaul to hover to focus and only concentrate on this. Then decided to trigger the overlay in the actual prototype to seperate the concerns. It all seems to be functioning now as expected, see: https://www.figma.com/proto/kKAF42YeDwyor8gC6U3Z0D/Design-System?node-id=3252-9220&t=e30N0LbptVmScHyn-1&scaling=min-zoom&content-scaling=fixed&page-id=3069%3A1532&starting-point-node-id=3252%3A9220&show-proto-sidebar=1

Thank you, Kevin

Vishal_Ramawat · Answer

Glad to hear that Kevin. Please mark the comment as resolved.

Sign up

Login with SSO

Login to the community

Login with SSO