FlowLine contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled

This commit is contained in:
ysCha 2025-09-04 17:06:53 +09:00
parent 08ae9ac7b9
commit c5700c62cc

View File

@ -12,11 +12,12 @@ export default function FlowLine({ FLOW_LINE_REF }) {
const { getMessage } = useMessage()
const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
const [filledInput, setFilledInput] = useState('')
const [pointerInput, setPointerInput] = useState('100')
const currentObject = useRecoilValue(currentObjectState)
const handleFocus = () => {
if (currentObject === null) {
FLOW_LINE_REF.POINTER_INPUT_REF.current.value = ''
FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
setPointerInput('')
setFilledInput('')
FLOW_LINE_REF.FILLED_INPUT_REF.current.blur()
}
}
@ -35,7 +36,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
<div className="outline-form">
<span>{getMessage('modal.movement.flow.line.position')}</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />
<input type="text" className="input-origin block" value={pointerInput} readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />
</div>
</div>
<div className="moving-tab-content">
@ -71,7 +72,6 @@ export default function FlowLine({ FLOW_LINE_REF }) {
<input
type="text"
className="input-origin block"
defaultValue={100}
ref={FLOW_LINE_REF.FILLED_INPUT_REF}
value={filledInput}
onFocus={handleFocus}