[Select] Unable to clear value and return to `placeholder`

I’m playing with the new Select placeholder prop, and am wondering if the following is possible?

As an example, let’s say you have a series of 3 selects for an automobile and the placeholder values for each are “make”, “model”, and “year”. When you select a new “make” (after having already selected both a “make” and a “model”) and the underlying list for “model” is updated, the component still technically has a value based on the previous list’s selection, therefore the placeholder doesn’t render.

Is there a way to reset value when updating the list?

[pepelele]

@andy-hook Same with me … When I select value then clear value to undefined SelectPrimitive still show previous value

<SelectPrimitive.Trigger asChild aria-label={ariaLabel}>
  <Button>
    <SelectPrimitive.Value
      placeholder={
        <span className="text-primary-500">{placeholder}</span>
      }
    />
    <SelectPrimitive.Icon className="ml-2">
      {allowClear ? (
        <span
          onPointerDown={(e) => {
            e.preventDefault();
            e.stopPropagation();
            props.onValueChange(undefined);
          }}
        >
          <Cross2Icon width={14} height={14} />
        </span>
      ) : (
        <CaretSortIcon width={14} height={14} />
      )}
    </SelectPrimitive.Icon>
  </Button>
</SelectPrimitive.Trigger>

[dungle-scrubs]

I no longer think this is an issue as I just learned something about React I didn’t know before.

Taking a look at the new beta docs, under the section, “Resetting all state when a prop changes”, it turns out that if you add a key prop to any component, React will reset all of the state inside of that component and all of its children when that key changes.

Taking that advice, I made this sandbox where you can add/remove that key prop to see the effect.

Btw, In those docs, the page, “You Might Not Need an Effect” has really changed the way I think about and build components.

Cheers