css Question posted in
Some basic documentation can be found here.

Css – React-Select Custom Component Not Working With Input

I’m working on creating a custom component for React-Select that adds a button to the options.

const customSingleValue = ({ data }) => (
   <div className="custom-single-value">
      <span> {data.label} </span>
      <button>Click me</button>
   </div>
);

<Select
   className="dropdown"
   options={fruitOptions}
   components={{ SingleValue: customSingleValue }}
/>

However, I’m having trouble integrating this with React-Select’s input/search feature. The button appears on a separate line, but I want it to stay on the same line as the input/search. Additionally, I want the base functionality of the custom component to be overwritten/hidden by the input/search when the user starts typing.

Not Styling With input

Question: How can I ensure my custom component stays on the same line as the input/search and is replaced by the input/search when the user starts typing, same as the default behavior?

Full Code:

import Select from "react-select";

const DropdownTest = () => {
    const fruitOptions = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'cherry', label: 'Cherry' },
        { value: 'date', label: 'Date' },
        { value: 'fig', label: 'Fig' }
    ];

    const customSingleValue = ({ data }) => (
        <div className="custom-single-value">
            <span> {data.label} </span>
            <button>Click me</button>
        </div>
    );

    return (
        <div className="dropdown-container">
            <Select
                className="dropdown"
                options={fruitOptions}
                components={{ SingleValue: customSingleValue }}
            />
        </div>
    );
};
export default DropdownTest;
Tags:

2

Answers


  1. 0

    Utilize props to pass in existing information. You can also utilize children instead of data.

    const customSingleValue = ({...props}) => (
        <components.SingleValue {...props}>
            <div className="custom-single-value">
                {props.children}
                {/* <span>{props.getValue()[0].label} </span> */}
                <button>Click me</button>
            </div>
        </components.SingleValue>
    );
    Login or Signup to reply.
  2. 0

    To achieve this with react-select, you need to make sure your custom component integrates smoothly with the built-in input/search functionality. Your current setup is almost correct, but there are a few things you can change to make sure the button stays on the same line as the input/search and disappears when the user starts typing.

    Try this:

    import React from "react";
import Select from "react-select";

const DropdownTest = () => {
    const fruitOptions = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'cherry', label: 'Cherry' },
        { value: 'date', label: 'Date' },
        { value: 'fig', label: 'Fig' }
    ];

    const CustomSingleValue = ({ data }) => (
        <div className="custom-single-value">
            <span>{data.label}</span>
            <button>Click me</button>
        </div>
    );

    const customStyles = {
        singleValue: (provided) => ({
            ...provided,
            display: 'flex',
            alignItems: 'center',
        }),
        placeholder: (provided) => ({
            ...provided,
            display: 'none', 
        }),
        input: (provided) => ({
            ...provided,
            margin: 0,
        }),
        control: (provided) => ({
            ...provided,
            display: 'flex',
            alignItems: 'center',
        }),
    };

    return (
        <div className="dropdown-container">
            <Select
                className="dropdown"
                options={fruitOptions}
                components={{ SingleValue: CustomSingleValue }}
                styles={customStyles}
            />
        </div>
    );
};

export default DropdownTest;

    This will make sure that your custom button appears alongside the selected value when an option is selected but does not interfere with the default input and search functionality.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search