[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?

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:7

Top GitHub Comments

6reactions

pepelelecommented, Jul 27, 2022

@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>

1reaction

dungle-scrubscommented, Dec 24, 2022

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

Top Results From Across the Web

Reset select2 value and show placeholder - Stack Overflow

Select2 uses a specific CSS class, so an easy way to reset it is: ... TO REMOVE SELECTED VALUE $('#employee_id').select2('val','');. TO CLEAR OPTION...

Placeholders - The jQuery replacement for select boxes

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.

<input type="search"> - HTML: HyperText Markup Language

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in...

ion-input: Custom Input Value Type Styling and CSS Properties

The first way is by adding the clearInput property which will show a clear button when the input has a value . The...

Dropdown - resets to placeholder label on out of focus

Every time I choose a value and move the cursor out it is refreshing and getting back to placeholder label. I have provided...