Slightly blurred text on CommandItem

[NiumXp]

All the content I put inside CommandList is getting blurry in Chrome due to border-b class on CommandInput. This is the JSX I'm using:

      <CommandDialog open={openPalette} onOpenChange={setOpenPalette}>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Grupo">
            <CommandItem>bla</CommandItem>
            <CommandItem>bla bla</CommandItem>
            <CommandItem>bla bla bla</CommandItem>
            <CommandItem>bla bla bla bla</CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>

The CommandInput with border-b class:

The CommandInput without border-b class:

Setting border-radius to unset in Dialog also works (if you are using Radix UI):

Notes and Workarounds

• In Firefox (130.0) it's working perfectlly;
• With border-b-2 everthing works as expected;
• Without border-b everthing works as expected;
• In using Dialog from shadcn/ui: https://ui.shadcn.com/docs/components/command;
• My Chrome User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36.

[notlimey]

I Have the same issue with even more blurr. Also using shadcn

Code: https://gist.github.com/notlimey/4eb5f5922014c3fc718d6749fc8c384a

[EliotKhachi]

I'd like to add to this. I'm getting blurry text when I add TWO buttons, and the blurriness goes away if I remove one of them.

    return (
      <Command shouldFilter={false} className={className} style={style}>
        <div className="relative">
          <Command.Input
            value={query}
            onValueChange={setQuery}
            className="w-full border-0 px-3 py-2 pr-10 text-xs focus:outline-none"
            placeholder="Search connections..."
            disabled={disabled}
          />
          <MagnifyingGlass className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
        </div>

        <Command.List>
          <div onWheel={handleWheel}>
            <ScrollArea className="h-[300px]">
              {filteredConnections.length === 0 ? (
                <Command.Empty className="py-6 text-center text-xs text-gray-500">
                  No connections found.
                </Command.Empty>
              ) : (
                <div>
                  {filteredConnections.map((item) => (
                    <Command.Item
                      key={`${item.edgeId}-${item.connectionIndex}`}
                      value={`${item.sourceNodeName}-${item.targetNodeName}-${item.connection.name || ''}`}
                      onSelect={() =>
                        onSelect?.(item.edgeId, item.connectionIndex)
                      }
                      className="px-4 py-1.5 cursor-pointer text-xs hover:bg-blue-600 hover:text-white"
                    >
                      <span className="font-medium">{item.sourceNodeName}</span>
                      <ArrowRight className="inline-block h-3 w-3 mx-1" />
                      <span className="font-medium">
                        {item.targetNodeName}:
                      </span>{' '}
                      {item.connection.name || 'Unnamed Connection'} -{' '}
                      {item.connection.type} {item.connection.subType}
                      {item.connection.magnitude && (
                        <>
                          {' '}
                          - {item.connection.magnitude} {item.connection.prefix}
                          {item.connection.unitName}
                        </>
                      )}
                      {/* <button>Copy getter</button> */}
                      <button>Copy setter</button>
                    </Command.Item>
                  ))}
                </div>
              )}
            </ScrollArea>
          </div>
        </Command.List>
      </Command>
    );
  },
);

ConnectionsSearch.displayName = 'ConnectionsSearch';
export default ConnectionsSearch;

[EliotKhachi]

Update: The issue seems to be that there is a max # of HTML elements allowable inside any given Command.Item, because I started commenting things out and the blurriness went away

[EliotKhachi]

Update: Getting closer to the issue. I removed literal characters inside the element and the blurriness went away.

I put back the characters, blurriness came back; I increased the width of my parent component, and the blurriness went away again.

The issue has to do with the Command Item width hitting the bounds of its parent component

[saasjesus]

Same issue