I am using ant design and I have 2 input fields Enter Example and Select Value now when I select text from Enter Example the selected text should get rendered inside the Select Value field
For selecting the highlighted text I am using window.getSelection().toString() and when I console I am getting the selected text value but how can I display that inside the Select Value Input Field
Problem :- How to render the selected text of Enter Example Input Field inside Select Value Input Field
What I have tried :-
const ExampleComponent = (props) => {
const [exampleValue,setExampleValue] = useState('')
const handleMouseUp = () => {
const selectedTextValue = window.getSelection().toString()
setExampleValue(selectedTextValue)
console.log(selectedTextValue)
}
return (
<Form
form={form}
labelCol={{ span: 7 }}
wrapperCol={{ span: 10 }}
layout="horizontal"
colon={true}
onFinish={onFinish}
size="large"
>
<Form.Item
label="Enter Example"
name="example_name"
className="csi-ant-form-item"
hasFeedback
rules={[
{ required: true, message: "This Field Cannot be Empty!" },
({ getFieldValue }) => ({
validator(_, value) {
if (value.length < 4) {
return Promise.reject("Length too short");
}
return Promise.resolve();
},
}),
]}
>
<AutoComplete>
<Input allowClear onMouseUp={handleMouseUp}/>
</AutoComplete>
</Form.Item>
<Form.Item
label="Select Value"
name="entity_value"
className="csi-ant-form-item"
hasFeedback
rules={[
{ required: true, message: "This Field Cannot be Empty!" },
]}
>
<AutoComplete>
<Input placeholder="Select Value from Example" value={exampleValue}/>
</AutoComplete>
</Form.Item>
</Form>
)
}
I am trying to display the highlighted text using the value prop like value ={exampleValue}