Skip to content

Commit e2900b6

Browse files
committed
fix flicker with observedValues buffer
1 parent a029189 commit e2900b6

File tree

1 file changed

+17
-1
lines changed

1 file changed

+17
-1
lines changed

src/client/packages/idom-client-react/src/components.js

+17-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function UserInputElement({ model }) {
8181
// order to allow all changes committed by the user to be recorded in the order they
8282
// occur. If we don't the user may commit multiple changes before we render next
8383
// causing the content of prior changes to be overwritten by subsequent changes.
84-
const value = props.value;
84+
let value = props.value;
8585
delete props.value;
8686

8787
// Instead of controlling the value, we set it in an effect.
@@ -91,6 +91,22 @@ function UserInputElement({ model }) {
9191
}
9292
}, [ref.current, value]);
9393

94+
// Track a buffer of observed values in order to avoid flicker
95+
const observedValues = React.useState([])[0];
96+
if (observedValues) {
97+
if (value === observedValues[0]) {
98+
observedValues.shift();
99+
value = observedValues[observedValues.length - 1];
100+
} else {
101+
observedValues.length = 0;
102+
}
103+
}
104+
105+
const givenOnChange = props.onChange;
106+
props.onChange = (event) => {
107+
observedValues.push(event.target.value);
108+
};
109+
94110
// Use createElement here to avoid warning about variable numbers of children not
95111
// having keys. Warning about this must now be the responsibility of the server
96112
// providing the models instead of the client rendering them.

0 commit comments

Comments
 (0)