Teact: Clear selection range info from input on blur

This commit is contained in:
Alexander Zinchuk 2025-06-04 20:40:32 +02:00
parent 7b1b669610
commit 9e5f0ae8cb

View File

@ -1,4 +1,4 @@
import type { ChangeEvent } from 'react'; import type { ChangeEvent, FocusEvent } from 'react';
import type { Signal } from '../../util/signals'; import type { Signal } from '../../util/signals';
import type { import type {
@ -53,6 +53,7 @@ const MAPPED_ATTRIBUTES: { [k: string]: string } = {
spellCheck: 'spellcheck', spellCheck: 'spellcheck',
}; };
const INDEX_KEY_PREFIX = '__indexKey#'; const INDEX_KEY_PREFIX = '__indexKey#';
const SELECTION_STATE_ATTRIBUTE = '__teactSelectionState';
const headsByElement = new WeakMap<Element, VirtualDomHead>(); const headsByElement = new WeakMap<Element, VirtualDomHead>();
const extraClasses = new WeakMap<Element, Set<string>>(); const extraClasses = new WeakMap<Element, Set<string>>();
@ -702,7 +703,7 @@ function processControlled(tag: string, props: AnyLiteral) {
} }
const { const {
value, checked, onInput, onChange, value, checked, onInput, onChange, onBlur,
} = props; } = props;
props.onChange = undefined; props.onChange = undefined;
@ -721,7 +722,7 @@ function processControlled(tag: string, props: AnyLiteral) {
const selectionState: SelectionState = { selectionStart, selectionEnd, isCaretAtEnd }; const selectionState: SelectionState = { selectionStart, selectionEnd, isCaretAtEnd };
e.currentTarget.dataset.__teactSelectionState = JSON.stringify(selectionState); e.currentTarget.dataset[SELECTION_STATE_ATTRIBUTE] = JSON.stringify(selectionState);
} }
} }
@ -729,6 +730,11 @@ function processControlled(tag: string, props: AnyLiteral) {
e.currentTarget.checked = checked; e.currentTarget.checked = checked;
} }
}; };
props.onBlur = (e: FocusEvent<HTMLInputElement>) => {
delete e.currentTarget.dataset[SELECTION_STATE_ATTRIBUTE];
onBlur?.(e);
};
} }
function processUncontrolledOnMount(element: DOMElement, props: AnyLiteral) { function processUncontrolledOnMount(element: DOMElement, props: AnyLiteral) {
@ -785,7 +791,7 @@ function setAttribute(element: DOMElement, key: string, value: any, namespace?:
if (inputEl.value !== value) { if (inputEl.value !== value) {
inputEl.value = value; inputEl.value = value;
const selectionStateJson = inputEl.dataset.__teactSelectionState; const selectionStateJson = inputEl.dataset[SELECTION_STATE_ATTRIBUTE];
if (selectionStateJson) { if (selectionStateJson) {
const { selectionStart, selectionEnd, isCaretAtEnd } = JSON.parse(selectionStateJson) as SelectionState; const { selectionStart, selectionEnd, isCaretAtEnd } = JSON.parse(selectionStateJson) as SelectionState;