Change text-color when isFocused && isSelected is true in custom implementation of ComboBox?

[deadcoder0904]

I'd like to change the text color when both isFocused && isSelected is true but unable to do so.

Here's my code:

className={clsx(
				'm-1 flex cursor-default items-center justify-between rounded-md py-2 px-2 text-sm outline-none',
				{
					'font-bold dark:text-indigo-500': isSelected,
					'dark:bg-primary-dark dark:text-white': isFocused,
					'dark:text-gray-400': !isFocused,
					'dark:text-white': isSelected && isFocused,
				}
			)}

I used the Codesandbox you've previously pointed to & re-created a demo without using clsx but just using ternary operator ? here → https://codesandbox.io/s/sleepy-edison-qh8c9?file=/src/ListBox.tsx (check line # 97)

className={`m-1 rounded-md py-2 px-2 text-sm outline-none cursor-default flex items-center justify-between ${text} ${
        isFocused ? "bg-pink-100" : ""
      } ${isSelected ? "font-bold" : ""}
      ${isFocused && isSelected ? "text-white" : ""}
    `}
    >

I'm not sure why the isFocused && isSelected is not applied even when it comes last & I've tried all combinations of putting isSelected, isFocused above, below, etc... but nothing worked.

Another thing about ComboBox is it doesn't open on checked icon when button is clicked but when I open it via arrow key it does open nicely. Do you want me to open an issue about it?

[snowystinger]

I think your problem is with your tailwind setup, when I console log out isFocused and isSelected, they are correct. And if I change it to instead set bg-pink-300, I see that come through.

I did find this, https://stackoverflow.com/questions/67098510/class-text-white-with-tailwind-does-not-work, so seems like a common thing to forget to add.

Another thing about ComboBox is it doesn't open on checked icon when button is clicked but when I open it via arrow key it does open nicely. Do you want me to open an issue about it?

I'm not sure what you mean, do you mean when you open the combobox, focus isn't on the selected item? I think it's behaving as expected, with mouse, focus will follow the mouse.

[snowystinger]

Hey, sorry if my message wasn't clear. I was saying that your isFocused && isSelected is behaving as expected given that I can show other tailwind classes. So I don't think it's a react-aria issue. Instead, I'm quite certain that it's a tailwind configuration problem. That StackOverflow I linked to shows how to fix text- not working. You can either try it locally if you think you've followed that step or in the codesandbox. I have not set up tailwind in codesandbox before, but I'm sure you could find something explaining it.
Let us know if that doesn't fix it.

[LFDanLu]

@deadcoder0904 just to chime in, make sure you aren't overriding one text color with another since the isFocused && isSelected style will conflict with the isFocused or isSelected style

[deadcoder0904]

@LFDanLu yes, i'm overriding bcz that's how it will be right? technically i want something that is focused via arrow key & selected already. idk how else would i do it?

but the last classname takes priority in tailwind right? or maybe that's the issue.

@snowystinger idk how to fix it, sadly.

[LFDanLu]

Something like this worked for me: https://codesandbox.io/s/interesting-thompson-nuxxz?file=/src/ListBox.tsx

[deadcoder0904]

@LFDanLu doesn't work for me but maybe bcz i'm using clsx. my version looks like:

className={clsx(
				'm-1 flex cursor-default items-center justify-between rounded-md py-2 px-2 text-sm outline-none',
				{
					'font-bold dark:text-indigo-500': isSelected,
					'dark:bg-primary-dark dark:text-white': isFocused,
					'dark:text-gray-400': !isFocused,
					'dark:text-white': isFocused && isSelected,
				}
			)}

no matter where i put isFocused && isSelected, it always remains in indigo color instead of white :(

[deadcoder0904]

@snowystinger i wasn't doing tailwind wrong. codesandbox has weird issues with tailwind dark mode & tailwind in general. faced this problem before too. had to remove all dark: prefixes to get all colors working. it shows colors now.

@LFDanLu here's my codesandbox demo that looks exactly like yours, just using clsx → https://codesandbox.io/s/combobox-with-fzf-496ub?file=/src/ComboBox/ListBox.tsx (it seems like i'm using clsx wrong but looking at docs, it seems correct)

[deadcoder0904]

Found the solution thanks to some guy on Reddit. Had to do isSelected && !isFocused:

<li
	{...optionProps}
	ref={ref}
	className={clsx(
		'm-1 flex cursor-default items-center justify-between rounded-md py-2 px-2 text-sm outline-none',
		{
			'font-bold dark:text-indigo-500': isSelected && !isFocused,
		},
		{
			'dark:bg-primary-dark dark:text-white': isFocused,
		},
		{
			'dark:text-gray-400': !isFocused,
		}
	)}
>
	{item.rendered}
	{isSelected && (
		<CheckIcon
			aria-hidden="true"
			className={clsx('h-5 w-5', {
				'dark:text-indigo-500': !isFocused,
			})}
		/>
	)}
</li>

Codesandbox Demo → https://codesandbox.io/s/combobox-with-fzf-496ub?file=/src/ComboBox/ListBox.tsx