In react select how to allow user to select text of selected option to copy its text

user_3373957 0
Viewed 1794

React select does not allow text selection of selected option. I want user to be able to select text of selected option. Whenever user tries to select the text of selected option, react select's menu gets open(pops up).

link for code sandbox: https://codesandbox.io/s/bzdhr?module=/example.js

Any help appreciated, Thanks in advance.

react-select reactjs
2 Answers
user_81987650

This happens because of the react-select onMouseDown event. You can better handle it by overriding react-select custom renderers, wrap the single value renderer in a div which doesn't propagate onMouseDown events.

import React from 'react';
import Select, { Props, components, SingleValueProps } from 'react-select';


const SingleValueRenderer: React.FC<SingleValueProps<any>> = ({ children, ...props }) => (
    <div
        onMouseDown={(event) => {
            event.stopPropagation();
        }}>
        <components.SingleValue {...props}>{children}</components.SingleValue>
    </div>
);

const Dropdown: React.FC<Props> = (props) => (
    <Select
        components={{ SingleValue: SingleValueRenderer }}
        {...props}
    />
);


export default Dropdown;
user_13432170
Related