CODEWITHSUNDEEP
htmlcssreactjsreact-select
Dan Cancro
Dan Cancro

Reputation: 1461

React Select's short input box component width causes cursor position problem

I don't fully understand the ins and outs of react-select, but this seems to be a problem.

If I put the cursor somewhere other than the right end of the text in the box, say after the second of five characters, and then blur away from the component, then click in the box at a point to the right of the end of the text, the cursor will still be where it was, rather than at the right end of the text where it should be. If I click at a point within the text, then the cursor goes there. If I want to put the cursor at the far right of the text, I need to click within the very narrow space of a couple pixels to the right of the rightmost character.

This is happening because the width of the <input> box changes to the width of its contents, so clicks within the container to the right of the <input> are received by the container. The containing <div> has these styles that seem to matter. I'm not familiar with inline-grids.

display: inline-grid;
grid-area: 1 1 2 3;
grid-template-columns: 0 min-content;
width: 100%;

The <input> has this:

grid-area: 1 2 auto auto;
width: 100%;
min-width: 2px;

Judging by the examples, it seems that input text in a react-select is meant to go away when you blur. Or maybe not. I want the text to stay there. My application is a search box.

I tried these:

autosize={false}

.Select-control {
    table-layout: fixed;
}

.Select-input {
    overflow: hidden;
    max-width: 100%;
}

They didn't help

What's the best way to make this work?

Upvotes: 0

Views: 1002

Answers (1)

Jackson
Jackson

Reputation: 1370

Fixed it by using grid-template-columns: 0fr. You can see it here https://codesandbox.io/s/eloquent-hypatia-87f02b Now you can select anywhere you want and it'll behave as a regular input.

Original Answer

Problem is the min-content in the grid-template-columns so try this:

const customStyles = {
  control: () => ({
    gridTemplateColumns: '0px max-content'
  })
}

<Select styles={customStyles} options={...} />

Note that even with this you still get max of 1 since grid-area is 1 / 1 / 2 / 3 so you can also configure those if you need to.

More info on styles here

Upvotes: 1

Related Questions