React Select的短输入框组件宽度导致光标位置问题

Question

我不是很了解react-select的来龙去脉，但这似乎是个问题

如果我将光标放在方框中文本右端以外的某个位置，比如五个字符中的第二个字符之后，然后从组件中移开，然后在右侧的某个点处单击方框在文本的末尾，光标仍将位于它原来的位置，而不是在文本的右端它应该在的位置。如果我单击文本中的某个点，则光标会移动到那里。如果我想将光标放在文本的最右边，我需要在最右边字符右边几个像素的非常狭窄的 space 范围内单击。

发生这种情况是因为 <input> 框的宽度更改为其内容的宽度，因此容器会接收 <input> 右侧容器内的点击。包含 <div> 的这些样式似乎很重要。我不熟悉内联网格。

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

<input> 有这个：

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

根据 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 判断。

我试过了these:

autosize={false}

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

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

他们没有帮助

完成这项工作的最佳方法是什么？

Answer 1

使用 grid-template-columns: 0fr 修复了它。你可以在这里看到它 https://codesandbox.io/s/eloquent-hypatia-87f02b 现在你可以 select 任何你想要的地方，它会作为一个常规输入。

原答案

问题是 grid-template-columns 中的 min-content 所以试试这个：

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

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

请注意，即使如此，您仍然可以获得 1 的最大值，因为 grid-area 是 1 / 1 / 2 / 3，因此如果需要，您也可以配置它们。

有关 styles 的更多信息 here

React Select的短输入框组件宽度导致光标位置问题

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

html

css

reactjs

react-select