[英]react-select focus() doesn't show cursor after change
As described in the official documentation for react-select , I'm trying to use ref and focus() to manually set the focus into the control input field.如react-select 的官方文档中所述,我正在尝试使用 ref 和 focus() 将焦点手动设置到控制输入字段中。 In most instances it works, but not immediately after selecting an Option from the dropdown.
在大多数情况下,它会起作用,但不是在从下拉列表中选择选项后立即起作用。
After selecting an option from the dropdown, the control gets the focus but the cursor doesn't appear.从下拉列表中选择一个选项后,控件获得焦点,但 cursor 没有出现。 It only appears if you start typing (including hitting the Esc key).
它仅在您开始输入(包括按 Esc 键)时出现。 On subsequent openings of the menu, the cursor appears along with the focus of the entire control field.
在随后打开菜单时,cursor 与整个控制区域的焦点一起出现。 Any ideas how to get this working?
任何想法如何让这个工作?
I've created a sample code in codesandbox.io here我在codesandbox.io中创建了一个示例代码
This is the code:这是代码:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import styled from "styled-components";
import { stateOptions } from "./data.js";
class PopoutExample extends Component {
selectRef = React.createRef();
state = {
isOpen: false,
option: undefined,
};
toggleOpen = () => {
const isOpening = !this.state.isOpen;
this.setState(
{
isOpen: isOpening,
},
() => isOpening && setTimeout(() => this.selectRef.focus(), 400),
);
};
onSelectChange = option => {
this.toggleOpen();
this.setState({ option });
};
render() {
const { isOpen, option } = this.state;
return (
<Dropdown
target={
<MainButton onClick={this.toggleOpen}>
{option ? option.label : "Select a State"}
</MainButton>
}
>
<Select
menuIsOpen
ref={ref => {
this.selectRef = ref;
}}
styles={{
container: provided => ({
...provided,
display: isOpen ? "block" : "none",
}),
}}
onChange={this.onSelectChange}
options={stateOptions}
value={option}
controlShouldRenderValue={false}
/>
</Dropdown>
);
}
}
const MainButton = styled.button`
padding: 10px;
background-color: aqua;
width: 100%;
`;
const Dropdown = ({ children, target }) => (
<div>
{target}
{children}
</div>
);
ReactDOM.render(<PopoutExample />, document.getElementById("root"));
You can notice that the bug also exists in the official react-select examples .您可以注意到官方 react-select 示例中也存在该错误。 Even clicking on the
blur
button after the selection is not solving the problem.即使在选择后单击
blur
按钮也不能解决问题。
There's probably a small different in the code when user closes
the menu and saves + automatically closes
action.当用户
closes
菜单并saves + automatically closes
操作时,代码中可能会有一点不同。
I saw you've opened an issue on github.我看到你在 github 上打开了一个问题。 Let's keep an eye on it.
让我们密切关注它。
If I can offer an alternative to the behaviour you're trying to achieve, instead of hiding the Select
with css why don't just mount
/ unmount
it?如果我可以为您尝试实现的行为提供替代方法,而不是用 css 隐藏
Select
为什么不只是mount
/ unmount
它?
class PopoutExample extends Component {
state = {
isOpen: false,
option: undefined
};
toggleOpen = () => {
this.setState({
isOpen: !this.state.isOpen
});
};
onSelectChange = option => {
this.setState({ option, isOpen: !this.state.isOpen });
};
render() {
const { isOpen, option } = this.state;
return (
<Dropdown
target={
<MainButton onClick={this.toggleOpen}>
{option ? option.label : "Select a State"}
</MainButton>
}
>
{isOpen && (
<Select
autoFocus
menuIsOpen
onChange={this.onSelectChange}
options={stateOptions}
value={option}
controlShouldRenderValue={false}
/>
)}
</Dropdown>
);
}
}
Here alive example of my solution.这是我的解决方案的一个活生生的例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.