Set default value when input is empty to ComboBox?

[deadcoder0904]

I have a Timezone ComboBox that is field with a specific value like GMT(+05:30) Asia/Kolkata

Now when I empty the input field, it becomes empty.

But when I focus out of it, it doesn't go back to the original timezone like GMT(+05:30) Asia/Kolkata

I want it to go to the original timezone value instead of being empty when I click outside it.

How do I do it? And nope, don't say defaultInputValue bcz I already have it:

<ComboBox
  label="Timezone"
  defaultInputValue={tz}
  defaultItems={options}
  onSelectionChange={changeTimezone}
>
  {(item) => <Item key={item.label}>{item.label}</Item>}
</ComboBox>

Bdw, the ComboBox is perfect. I managed to make it work with Tailwind with my own styling although I do prefer Headless UI APIs but it works 🤷‍♂️

[LFDanLu]

defaultInputValue only specifies what the input value is at first render but doesn't indicate a selected value. To me it sounds like you want a defaultSelectedKey. Also note that clearing out all the text within a ComboBox will clear selection but if you control inputValue and selectedKey you can override this default behavior yourself via a custom onSelectionChange

[deadcoder0904]

this is a little complicated.

i tried using defaultSelectedKey on your example & it worked. idk why it doesnt work when i call it from a fake api (linked codesandbox below)

also, this is somehow causing performance issues & it is pretty darn slow. like 5 sec slow on every keystroke. previously, it worked fine. this is totally my fault when i use the wrong things like mix-up onSelectionChange & defaultInputValue, etc...

codesandbox demo → https://codesandbox.io/s/combobox-with-fuse-js-t7u4c?file=/src/App.tsx

i'm unable to figure this out so link to any examples would be appreciated.

also, how do i filter using fuse.js?

do i still use filteredItems like so:

const filteredItems = useMemo(
		() => timezonesList.filter(() => fuse.search(filterValue)),
		[timezonesList, filterValue]
	)

bcz this doesn't work as linked in the codesandbox.

do i need to do it inside onSelectionChange?

ps: the codesandbox demo is missing some colors on arrow selection (god knows why)

[deadcoder0904]

another question: should uncontrolled props be paired with uncontrolled & controlled with controlled & no mix & match, right?

[reidbarber]

Just glancing at their api, you probably want this:

  const filteredItems = React.useMemo(
    () => fuse.search(filterValue).map((res) => res.item),
    [timezonesList, filterValue]
  );

[deadcoder0904]

@reidbarber thank you, that worked perfectly. also, solved my performance problem :)

i guess i was looping over too many items 😂

[LFDanLu]

@deadcoder0904 You can view uncontrolled props (defaultInputValue and defaultSelectedKey) as a way to apply initial values only. I would advise you use the controlled props if you are at all interested in tracking the combobox's current input value and/or selected key and in that case you won't need to use the uncontrolled props.

[deadcoder0904]

@LFDanLu but defaultSelectedKey isn't working for me. see codesandbox → https://codesandbox.io/s/combobox-with-fzf-496ub?file=/src/App.tsx

it's working with static prop like in the cat example on the docs but dynamically i tried setting it up using useEffect but that doesn't work. in my real app, i did it like this:

const [defaultValue, setDefaultValue] = useState('')

useEffect(() => {
	if (settings?.timezone) {
		setDefaultValue(settings.timezone)
	}
}, [isLoading])

<ComboBox
	defaultSelectedKey={defaultValue}
/>

i've found a way to make empty state fill using onBlur but i can't make it work until either defaultSelectedKey or defaultInputValue works.

here's the code (same as codesandbox linked above):

import * as React from "react";
import { Fzf } from "fzf";
import { Item } from "react-stately";
import { getTimeZones } from "@vvo/tzdb";

import "./styles.css";

import { ComboBox } from "./ComboBox/index";

const fakeTimezoneAPI = (): Promise<string> =>
  new Promise((resolve, reject) => {
    return setTimeout(() => resolve("(GMT+05:30) Asia/Kolkata"), 3000);
  });

const App = () => {
  const [tz, setTz] = React.useState("");
  const [loading, setLoading] = React.useState(true);
  const [showAll, setShowAll] = React.useState(false);
  const [filterValue, setFilterValue] = React.useState("");
  const timezones = getTimeZones();
  const timezonesList = timezones.map(({ name, currentTimeFormat }) => {
    const key = `(GMT${currentTimeFormat.substring(0, 6)}) ${name.replace(
      /_/g,
      " "
    )}`;
    return { key };
  });
  fakeTimezoneAPI().then((tz) => {
    setLoading(false);
    setTz(tz);
  });
  const fzf = React.useMemo(
    () =>
      new Fzf(timezonesList, {
        selector: (item) => item.key
      }),
    [timezonesList]
  );
  const filteredItems = React.useMemo(
    () => fzf.find(filterValue).map((tz) => tz.item),
    [filterValue, fzf]
  );

  const onInputChange = (value: string) => {
    console.log({ value });
    setShowAll(false);
    setFilterValue(value);
  };

  const onSelectionChange = (key: any) => {
    console.log({ key });
  };

  return (
    <div className="flex items-center flex-col">
      <h1 className="text-indigo-900 text-4xl mb-20">ComboBox with Fzf</h1>
      {loading ? (
        <span>Loading...</span>
      ) : (
        <ComboBox
          label="Timezone"
          onOpenChange={(isOpen, menuTrigger) => {
            // Show all items if menu is opened manually
            // i.e. by the arrow keys or trigger button
            if (menuTrigger === "manual" && isOpen) {
              setShowAll(true);
            }
          }}
          defaultSelectedKey={tz}
          items={showAll ? timezonesList : filteredItems}
          inputValue={filterValue}
          onInputChange={onInputChange}
          onSelectionChange={onSelectionChange}
          allowsCustomValue
        >
          {(item) => <Item key={item.key}>{item.key}</Item>}
        </ComboBox>
      )}
    </div>
  );
};

export default App;

[deadcoder0904]

alright, got the defaultSelectedKey working now. working on setting default value when input becomes empty now :)

[deadcoder0904]

I got it working for my real app but this fake demo doesn't show it the 1st time,i.e, on reload even though I have selected defaultSelectedKey just like in my real app.

Anyways, here's the Codesandbox → https://codesandbox.io/s/combobox-with-fzf-496ub?file=/src/App.tsx

The main logic is in the onBlur plus a bunch of other things to make it work:

const onBlur = (e: any) => {
    const tz = e.target.value;
    if (!timezonesList.map((item) => item.key).includes(tz)) {
      setInputValue(defaultTz); // here it should be actual database value
    }
  };

Thanks, @LFDanLu & @reidbarber for the help 🙌