Please How Can I Resolve this?

AI
1

Please, how do I resolve this blur issue?

It works with keyboard arrows and Enter to select, but it’s buried and unavailable to select with a mouse click.

Together with AI, we have been turning round the circle and it still doesn’t work.

image
image609×496 30.6 KB

2

What language are you using?

If a javascript variant, then this is likely due to event propagation. Try using event.stopPropagation() in your option clicks within your select dropdown.

3

Its a web application I tink Nextjs, React and Typescripts is what its using. But I asked it here is the respond

The technology we’re using to create that searchable selection dropdown isn’t a single program, but rather a clever combination of several powerful, specialized components from our tech stack.

Here’s a breakdown of the key players:

  1. Shadcn/ui Popover: This component is responsible for the floating box that appears when you click the button. Its main job is to manage the opening, closing, and positioning of that box. The tricky “blur” behavior we’ve been fighting is part of how the Popover manages focus to decide when to close itself.
  2. Shadcn/ui Command (powered by cmdk): This is the component that gives us the “command palette” or searchable list functionality inside the popover. It provides the search input (CommandInput), the list of results (CommandList), and the individual selectable items (CommandItem). The underlying library, cmdk, is highly optimized for this kind of fast, filterable menu.
  3. React: At the core of it all is React, which we use to manage the state (like what client is currently selected) and handle user events like onMouseDown.

So, we are essentially placing a Command component inside a Popover component to create what’s known as a Combobox.

The challenge we’ve been tackling is making these two separate components, which weren’t originally designed as one single unit, play nicely together. The problem boils down to a conflict in focus management: clicking an item in the Command list was causing the Popover to close before the selection could be registered. Our fix with onMouseDown is a standard way in React to manually resolve this kind of event conflict.

4

sometimes when I encounter gnarly problems with the AI, I end up asking it to take a step and then completely refactor it and give the overall intent of what the thing is supposed to do and what is currently not work and tell it that I want to get to the bottom of fixing it; and then more times than not it will work out. I was running into this a lot with the calendar component; once I went to Components | The Component Gallery and then gave it a couple examples of the component that I thought was a better version than the shadcn version; then it was able to create a custom built component and veer away from the prebuilt component

1 Like
5

Thanks a lot for this idea. let me try if this can be applied to the component I’m looking for.