[英]react-select focus() doesn't show cursor after change
如react-select 的官方文档中所述,我正在尝试使用 ref 和 focus() 将焦点手动设置到控制输入字段中。 在大多数情况下,它会起作用,但不是在从下拉列表中选择选项后立即起作用。
从下拉列表中选择一个选项后,控件获得焦点,但 cursor 没有出现。 它仅在您开始输入(包括按 Esc 键)时出现。 在随后打开菜单时,cursor 与整个控制区域的焦点一起出现。 任何想法如何让这个工作?
我在codesandbox.io中创建了一个示例代码
这是代码:
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"));
您可以注意到官方 react-select 示例中也存在该错误。 即使在选择后单击blur
按钮也不能解决问题。
当用户closes
菜单并saves + automatically closes
操作时,代码中可能会有一点不同。
我看到你在 github 上打开了一个问题。 让我们密切关注它。
如果我可以为您尝试实现的行为提供替代方法,而不是用 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>
);
}
}
这是我的解决方案的一个活生生的例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.