CODEWITHSUNDEEP
reactjsreact-select
marielle
marielle

Reputation: 428

Show always placeholder using react-select

Is there a ways to always show the placeholder component even if there are some items selected? I would like to have the placeholder in the same position as it is normally, not on top on the select or above.

enter image description here

Upvotes: 1

Views: 1633

Answers (1)

Aurelio LIMA FERREIRA
Aurelio LIMA FERREIRA

Reputation: 97

You can inject the placeholder example

// @flow

import React, { useRef, useEffect } from "react";

import Select from "react-select";
import makeAnimated from "react-select/animated";
import { colourOptions } from "./docs/data";

const animatedComponents = makeAnimated();

export default function AnimatedMulti() {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.select.inputRef.style.minWidth = "100px";
    myRef.current.select.inputRef.placeholder = "Placeholder#1";
  }, []);

  return (
    <Select
      ref={myRef}
      placeholder=""
      closeMenuOnSelect={false}
      components={animatedComponents}
      defaultValue={[colourOptions[4], colourOptions[5]]}
      isMulti
      options={colourOptions}
    />
  );
}

Upvotes: 2

Related Questions