Skip to main content

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.


Screenshot 2024-07-04 at 16.53.48


Screenshot 2024-07-04 at 16.54.56

You have one interaction from Focus to Default, what is that?

Can you remove that?

I tried the same and having an issue to reset the button to Default from Focus. Else, it is working fine

image

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

Screenshot 2024-07-05 at 08.09.00


Screenshot 2024-07-05 at 08.09.59


Thank you, Kevin

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

Reply


Terms & ConditionsCookie settings