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

Question

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.

Does this answer your question? [How to select all text in input with Reactjs, when it focused?](https://stackoverflow.com/questions/36051883/how-to-select-all-text-in-input-with-reactjs-when-it-focused) — Praveen Kumar Purushothaman, May 25 '20 at 09:40
@PraveenKumarPurushothaman.. he is talking about the `react-select` library. — Barun Patro, May 25 '20 at 09:47

score 5 · Accepted Answer · answered May 25 '20 at 09:46

react-select doesn't allow us to select the text.. neither in options or the selected value for that matter..

the input component dominated the div that keeps the value.. there is no way to select that div.

however.. i managed to find a work-around for you.. this should do..

https://codesandbox.io/s/react-codesandboxer-example-5jhzf

score 1 · Answer 2 · answered May 18 '21 at 15:24

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;

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

2 Answers2