preact

preact copied to clipboard

I am trying to use Rifm.js library to create masked input. The library works with React, but fails to work with Preact/compat.

The demo is here: https://9x6wv.csb.app Source code: https://codesandbox.io/s/9x6wv

Hey @just-boris, thanks for opening this issue! I just opened the linked CodeSandbox and the masked inputs seemed to be working fine, maybe? Can you give it another try and let us know?

Thank you!

Hi @just-boris I can reproduce your issue in the codesandbox and I think it is another issue caused by preact not really supporting controlled inputs.

Ping @JoviDeCroock as I remember you were digging into this issue too.

If I'm really right and this is caused by not really supporting controlled components we need to take action on this. Either we should warn when someone is using controlled components (i.e. using the value attribute) or properly support controlled components (if that is even possible without a custom event system)

I haven't looked into this case specifically (yet, I'll try to make some time for this in the near future) but yes.

Let me describe the issue for future reference, what we do in Preact is we let the native behavior occur, this is our input command will alter the dom-node's value attribute. However when we re-render we double check this attribute, whether or not this was changed by a passive event or not. If it was and it doesn't correspond to the value we have in virtual dom we change it to be correct. Now for the case where this becomes erroneous imagine this:

const Input = () => {
  const [text, setText] = useState('');
  cosnt onChange = (e) => {
    if (e.target.value.length <= 3) {
      setText(e.target.value)
    }
  }
}

When we input "Foo" our state represents "Foo" and so does our input tag, when we type an extra "o" this condition will be false and the state will be Foo but our text in our input will be "Fooo". Linear happens if we'd setState with the currentValue because for instance instead of an if-check we only grab the first 3 characters.

I hope this is a clear description of where this currently fails. This could be solved by monkey-patching onInput in /compat for these scenario's

I just opened the linked CodeSandbox and the masked inputs seemed to be working fine, maybe? Can you give it another try and let us know?

@cristianbote the cursor always remains at the start of the input, when you type a text. Here is the video:

Solved this problem for me by overwriting inputs value though ref. Not sure, that is good, but it works. https://codesandbox.io/s/preact-phone-mask-i8r8y?fontsize=14&hidenavigation=1

@shtelzerartem tested your example, the same issue when you are trying to insert text in the middle:

@just-boris you can try to manage with this, by observing cursor position with selection start/end on key up. https://codesandbox.io/embed/preact-phone-mask-i8r8y?fontsize=14&hidenavigation=1&theme=dark

const handleChange = e => {
    const { selectionStart, value } = e.target;
    const inputValue = doFormat(value, "+* (***) ***-**-**", null);

    // On selection (e.key === undefined)
    if (e.key === undefined) {
      setValue(inputValue);
    }
    // On input change
    else if (e.key.replace(/[^0-9.]/g, "").length || e.key === "Backspace") {
      setValue(inputValue);
      ref.current.value = inputValue;
      const caretPos = doFormat(
        value.slice(0, selectionStart),
        "+* (***) ***-**-**",
        null
      ).length;
      ref.current.setSelectionRange(caretPos, caretPos);
    }
};

Text inputs are not controllable in Preact, from what I see

Text inputs are not controllable in Preact, from what I see

Is this still the case?

No