input are not controlled by value

[zhaoyao91]

IMPORTANT: If you have a question or an idea for a new feature use Github Discussions instead

Describe the bug

I passed a string as value into <input/>. when user type, I didn't change the value, but the value in the input element are still changed.

To Reproduce

see playground

Expected behavior

if I do not change the value, the value in element should not change. (as what is in react)

[ryansolid]

Yeah this one is a pain. React does something special here. I'm not sure who else does. The problem is you need to hack the input to actually maintain this. And add a bunch of other even listeners. I don't think this is something that I intend to ever implement. Someone did an audit a while back and realized only React was doing this out of all the libraries they tested. I don't see us changing natural DOM behavior and implementing this.

I'm pretty much a won't fix on this. But if there is overwhelming support in other libraries like Preact, Inferno, and Svelte I might consider it (but if memory serves none of these outside of compat do this).

[jorroll]

FWIW, my background is mainly in Angular but I find the current functionality expected. In fact, I'd be very surprised if the input value didn't update. From this conversation, I gather that, in React, the input wouldn't update. But if react is re-rendering the function component on every keypress I could see this making sense (as it is effectively re-initializing the input with a static value on every keypress). But the current behavior of Solidjs seems consistent with the DOM itself (e.g. if you create an <input value="fixed" /> you'll find that you can still change the input's value) and is what I would expect to happen.

[ryansolid]

I'm going to move this to discussions as no activity for 2 weeks and I don't see implementing this.

[juanrgm]

I achieved make an controlled input component. It is a first step but I have not got a polyfill for beforeInput.

Controlled input components are a must have, at least for me, and specially if you come from React.

https://playground.solidjs.com/?hash=1398793415&version=1.1.5

import { render } from "solid-js/web";
import { createSignal, createEffect, JSX } from "solid-js";

export type InputPropsType = Omit<
  JSX.InputHTMLAttributes<HTMLInputElement>,
  "onChange"
> & {
  defaultsValue?: string;
  onChange?: (event: ChangeEventType) => void;
};

export type ChangeEventDetailType = { value: string };
export type ChangeEventType = CustomEvent<ChangeEventDetailType>;

function applyInputTransform(
  text: string,
  inputType: InputEvent["inputType"],
  inputText: string,
  start: number,
  end: number
) {
  let newText: string;
  let newStart: number;
  if (start !== end) {
    newText = text.slice(0, start) + (inputText || "") + text.slice(end);
    newStart = start;
    if (inputType.startsWith("insert")) newStart++;
  } else if (inputType.startsWith("insert")) {
    newText = text.slice(0, start) + inputText + text.slice(end);
    newStart = start + inputText.length;
  } else if (inputType === "deleteContentBackward") {
    newStart = Math.max(0, start - 1);
    newText = text.slice(0, newStart) + text.slice(start);
    console.log({ start, newStart });
  } else if (inputType === "deleteContentForward") {
    newText = text.slice(0, start) + text.slice(start + 1);
    newStart = start;
  } else {
    newText = text;
    newStart = start;
  }
  return [newText, newStart] as [string, number];
}

function removeProps<T extends Record<string, any>, E extends string>(
  props: T,
  names: E[]
): Omit<T, E[number]> {
  const newProps = {
    ...props,
  };
  for (const name of names) delete newProps[name];
  return newProps;
}

export function Input(props: InputPropsType) {
  let control!: HTMLInputElement;
  let lastStart: number | undefined;
  let first = true;

  createEffect(() => {
    if (first && typeof props.value !== "string") {
      control.value = props.defaultsValue ?? "";
    } else {
      control.value = props.value?.toString() ?? "";
      control.selectionStart = control.selectionEnd =
        lastStart ?? control.value.length;
    }
    first = false;
  });

  const inputProps = removeProps(props, ["defaultsValue", "onChange"]);

  return (
    <input
      {...inputProps}
      ref={control}
      onBeforeInput={(event) => {
        if (typeof props.onBeforeInput === "function")
          props.onBeforeInput(event);
        if (typeof props.value === "string") {
          if (typeof control.selectionStart !== "number")
            throw new Error(`'selectionStart' can not be null`);
          if (typeof control.selectionEnd !== "number")
            throw new Error(`'selectionEnd' can not be null`);
          const [value, start] = applyInputTransform(
            control.value,
            event.inputType,
            event.data || "",
            control.selectionStart,
            control.selectionEnd
          );
          lastStart = start;
          if (props.onChange) {
            const event = new CustomEvent<ChangeEventDetailType>("change", {
              detail: {
                value,
              },
            });
            control.dispatchEvent(event);
            props.onChange(event);
          }
          event.preventDefault();
        }
      }}
    />
  );
}

render(() => {
  const [value, setValue] = createSignal("controlled value");
  return (
    <>
      <Input
        id="one"
        value={value()}
        onChange={(event) => setValue(event.detail.value.toUpperCase())}
      />
      <Input value="fixed value" />
      <Input defaultsValue="free value" />
    </>
  );
}, document.getElementById("app")!);

[whoami-shubham]

here is how I created a controlled text using two state , (this might not be optimized )
https://playground.solidjs.com/?hash=1099372838&version=1.3.13

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Counter() {
  const [length, setLength] = createSignal(0);
  const [value, setValue] = createSignal("");

  return (
    <input type="text" maxLength={length()} value={value()} onKeyPress={(event)=>{
      setLength(length()+1);
      setValue(value()+String.fromCharCode(event.keyCode));
    }} />
  );
}

render(() => <Counter />, document.getElementById("app"));

[atk]

This does not work with composed or special characters.

[whoami-shubham]

@atk can you give some examples ? I am able to type characters in input fields and when I comment onKeyPress function it doesn't let me type.

[atk]

It seems that only happens on mobile keyboards.

[BHVampire]

I think I got it:

Action:

• On input

Condition:

• Only numbers allowed

Question:

• Is the new character a number?

If:

• TRUE: Update the State with the new Input value. setState(value)
• FALSE: Update the Input value with the actual State. value = state( ) [This will remove any unwanted changes from the input].

import { createSignal } from 'solid-js'

const App = () => {
    const [state, setState] = createSignal('')

    const inputHandler = (e) => {
        const value = e.currentTarget.value

        if (value.match('^[0-9]*$')) setState(value) // TRUE <- ¿Only numbers? Ok, update the state.
        else e.currentTarget.value = state() // FALSE <- ¿Not a number? Go back.
    }

// Or in a single line:
// onInput={e => e.currentTarget.value.match('^[0-9]*$') ? setState(e.currentTarget.value) : e.currentTarget.value = state( )}

    return <form>
        <input
            type="text"
            value={state()}
            onInput={e => inputHandler(e)}
        />
    </form>
}

export default App

Update:

If you want to preserve the cursor position:

const idHandler: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (e) => {
        const input = e.currentTarget
        const value = input.value
        const selectionStart = input.selectionStart - 1

        if (value.match(/^[a-zA-ZáéíóúÁÉÍÓÚüÜñÑöÖ0-9_\-]+$/)) setState(value)
        else {
            const previousValue = state()
            input.value = previousValue
            input.setSelectionRange(selectionStart, selectionStart)
        }
    }

[rnwonder]

This worked for me the trick was to change the actual value of the input so it remains consistent with the value state

const checkIfInputNumber = (value: string) => {
  if (isNaN(Number(value)) && value !== "") {
    return false;
  } else {
    return true;
  }
};

const NumberInputSJ: Component<NumberInputProps> = (props) => {
   let inputRef: any = null;

   const removeLastEntry = (e: any) => {
       inputRef.value = e.target.value.slice(0, e.target.value.length - 1);
    };

    const handleNumberChange = (e: any) => {
       if (!checkIfInputNumber(e.target.value)) removeLastEntry(e);

       if (props.numberRangeStart || props.numberRangeStart === 0) {
          if (Number(e.target.value) < props?.numberRangeStart!) removeLastEntry(e);
        }

       if (props.numberRangeEnd || props.numberRangeEnd === 0) {
          if (Number(e.target.value) > props.numberRangeEnd!) removeLastEntry(e);
       }

       if (props.limit && e.target.value.length > props.limit) removeLastEntry(e);

       props.setValue?.(e.target.value);
    }
      return (
         <input 
           type="text
           value={props.value()} 
           onInput={handleNumberChange} 
           ref={inputRef} 
          />
      )
    }

[snnsnn]

Proposed solutions are unnecessarily verbose, it is best to set a new value to the element inside the event handler using the event object:

event.currentTarget.value  = 'new value';

Now you have a controlled component.

[atk]

That will reset the cursor position, so editing such a field will become a hassle.

[snnsnn]

Yes, but we can capture the caret position before the change and restore it later.

Browsers preserve the caret position if the input value does not change, that's why we append an x to the state in the example, to force it to lose the position.

import { createSignal, JSX } from 'solid-js';
import { render } from 'solid-js/web';

export const App = () => {
  const [state, setState] = createSignal('Hello');

  const handleChange: JSX.ChangeEventHandler<HTMLInputElement, Event> = (
    event,
  ) => {
    const {
      selectionStart,
      selectionEnd,
      selectionDirection,
    } = event.currentTarget;

    setState(event.currentTarget.value + 'x');
    event.currentTarget.value = state();
    
    event.currentTarget.setSelectionRange(selectionStart, selectionEnd, selectionDirection || 'none');
  };

  return (
    <div>
      <input value={state()} oninput={handleChange} />
      <span>{state()}</span>
    </div>
  );
};

render(App, document.body);

https://playground.solidjs.com/anonymous/118b3a04-fa03-4cd8-b480-fc6092c33313

[Hachikoi-the-creator]

I always get so confused when I look at this convo
this works, and this is the first google result, so adding this to save me later, hope it helps someone else

import { createSignal, type Component } from "solid-js";

const ControlInput: Component = () => {
  const [search, setSearch] = createSignal("");

  return (
    <form>
      <input
        type="number"
        value={search()}
        onInput={(e) => setSearch(e.currentTarget.value)}
      />
    </form>
  );
};

export default ControlInput;

[stevenhuyn]

@Hachikoi-the-creator If you try a conditional on the onInput method, you'll notice it does not work, the input field will change but the value of search() will be different.

[snnsnn]

Controlled input means your action changes the state, the state updates the value. In other words it is the state that controls the value. However, in this example the state is updated when the input element loses focus. So you don't have a controlled input.

[Hachikoi-the-creator]

@stevenhuyn tnx I got the weird behavour now with this code, stops modifying the state once you enter a 'j' instead of just skipping it

      <input
        type="text"
        value={search()}
        onInput={(e) => {
          const value = e.currentTarget.value;
          if (value.includes("j")) return;
          setSearch(value);
        }}
      />

[mb21]

This is the correct solution for the normal basic use-case.

@snnsnn from the docs (emphasis added):

Note that onChange and onInput work according to their native behavior (unlike, say, React). onInput will fire immediately after the value has changed; for most fields, onChange will only fire after the field loses focus. The event's currentTarget refers to the element that the event was attached to, while target gives the element that actually triggered the event (e.g. the user clicked on).

[mb21]

We had a similar problem building a multi-line textarea that submits on enter key. Sharing this to add another use-case for solid devs to consider, along with a solution.

Requirements

1. shift-enter adds a newline in the textarea
2. pressing enter submits immediately (without the newline showing in the textarea briefly)
3. clicking submit button submits
4. submiting clears the input field

Problems

• Because of 2) we need onKeyDown. But e.onKeyDown doesn't have the newest character in e.currentTarget.value, so we need another way to read that out, e.g. onInput,
• But onInput doesn't have e.key property to check for Enter key.
• Also, onInput fires late, so when a user hits the enter key, we would clear the textarea in the onKeyDown step, only for the onInput to fire after that and add the newline again.

Solution

In the end, I was inspired by old jQuery answers on stackoverflow that basically do form.submit() onKeyDown:

Here's the playground and code:

  const [input, setInput] = createSignal('')
  return (
    <form id='formId' onSubmit={e => {
      e.preventDefault()
      console.log('Submitted: ' + input())
      setInput('')
     }}>
      <textarea
        value={input()}
        onInput={e => setInput(e.currentTarget.value)}
        onKeyDown={e => {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault()
            const form = document.getElementById('formId') as HTMLFormElement
            form.requestSubmit()
          }
        }}
      />
      <button>Submit</button>
    </form>

[snnsnn]

This is one of the topics gets out of hand and the one that people try to force React's way of thinking in Solid. First of all you don't need controlled components to validate your form values. Controlled components does not work well with natural order of browser events. Just use regular state management and indicate an error for the invalid inputs and do not post your values until they are all valid. Controlled inputs are good for forcing the correct value while typing.

[phtdacosta]

I found a very easy fix, NOT HACKY AT ALL, for that and @ryansolid maybe could point that out on some side documentation for Solid newcomers from React.

Use a normal e.target.value with createSignal and then make sure to run the regex replace or whatever modifier inside a createEffect function.

Let the createEffect modifies your input in real time instead of trying to do some hacky workaround over the input event callback.

[stevenhuyn]

can you write a small example?

[phtdacosta]

Here it is:

const [lowercaseAlpha, setLowercaseAlpha] = createSignal("")

createEffect(() => {
	setLowercaseAlpha(lowercaseAlpha().replace(/[^a-z]/g, ""))
})

<input type="text" value={lowercaseAlpha()} onInput={e => setLowercaseAlpha(e.target.value)}/>

As obvious as you could imagine, and it just works.

[snnsnn]

This is not how controlled input works. Please see the discussion above.

Controlled input means your action changes the state, the state updates the value. In other words it is the state that controls the value. However, in this example the state is updated when the input element loses focus. So you don't have a controlled input.

[phtdacosta]

Did I mention "controlled input" at all? I do not care what name you call it.
The workaround I suggested does the job with the simple APIs we already have, without employing bug-prone tactics that does not belong to the intended way for the framework usage.
It just works out-of-the-box for the intended use of doing real-time input corrections, as I mentioned.

[snnsnn]

I think you are missing the point, the whole discussion is about achieving React like controlled input. The expected behavior makes it pretty clear:

If I do not change the value, the value in element should not change. (as what is in react)

The problem is the oninput event is fired after the input change is committed, so, the input element already has the new value when the event handler is called. That is the native behavior however React overwrites it, allowing users to update state before input receives the new value. React can achieve it because of the VDOM and its top-down rendering mechanism.

Using an effect does not prevent the element to receive the new value, it overwrites it after the rendering phase because that is when effects are run. Otherwise you don't even need an effect, just pass the state value and it works because components subscribe to state changes, and unlike using an effect, the update will be immediate.

import { render } from "solid-js/web";
import { createSignal, createEffect } from "solid-js";

function App() {
  const [lowercaseAlpha, setLowercaseAlpha] = createSignal("");
  const val = () => setLowercaseAlpha(lowercaseAlpha().replace(/[^a-z]/g, ""));

  return (
    <input type="text" value={val()} onInput={e => setLowercaseAlpha(e.target.value)}/>
  );
}

render(() => <App />, document.getElementById("app")!);

https://playground.solidjs.com/anonymous/7d877752-f06c-48d3-b3ab-042d7cbd9a38

Your solution also suffers from the shortcomings that is discussed in the thread, it does not reveal them yet because the example is simple and does not require caret related manipulations.

[tronikelis]

How about this?

At first glance seems to work on ff, chromium

https://playground.solidjs.com/anonymous/7db5e732-718d-40b5-8a4d-a47ff29109e2

import { render } from "solid-js/web";
import {
  createSignal,
  createEffect,
  on,
  type ComponentProps,
  splitProps,
  onMount,
  onCleanup,
} from "solid-js";

function ControlledInput(props: ComponentProps<"input">) {
  const [local, others] = splitProps(props, [
    "value",
    "ref",

    "oninput",
    "onInput",
  ]);

  let ref: HTMLInputElement | undefined;

  const updateInput = () => {
    if (!ref || !local.value) return;
    ref.value = (local.value || "").toString();
  };

  createEffect(
    on(
      () => local.value,
      () => {
        if (!ref) return;
        updateInput();
      },
    ),
  );

  const onInput = (
    e: InputEvent & {
      target: HTMLInputElement;
      currentTarget: HTMLInputElement;
    },
  ) => {
    void Promise.resolve().then(updateInput);

    if (typeof local.onInput === "function") {
      local.onInput(e);
    }
    if (typeof local.oninput === "function") {
      local.oninput(e);
    }
  };

  return <input ref={ref} onInput={onInput} value={local.value} {...others} />;
}

function App() {
  const [state, setState] = createSignal("");

  onMount(() => {
    const i = setInterval(() => {
      setState("[FOO]");
    }, 3e3);

    onCleanup(() => {
      clearInterval(i);
    });
  });

  return (
    <ControlledInput
      placeholder="HELLO"
      value={state()}
      onInput={(e) => {
        if (e.target.value.length > 10) return;
        setState(e.target.value);
      }}
    />
  );
}

render(() => <App />, document.getElementById("app")!);

[beary]

Using onBeforeInput seems simple

import { createSignal } from 'solid-js'

const Example = () => {
  const [phoneNumber, setPhoneNumber] = createSignal('')
  return (
    <input
      value={phoneNumber()}
      onBeforeInput={e => e.data?.match(/\D/) && e.preventDefault()}
      onInput={e => setPhoneNumber(e.target.value)}
    />
  )
}

export default Example

[sbfkcel]

The reason for this problem is that the value has not changed due to the restriction.
In addition to preventing the default behavior, another less elegant solution is to manually trigger a value change before setting the value.

import { render } from "solid-js/web";
import { createSignal,createEffect } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  const onInput = function(e){
    let value = +e.target.value;
    value = value < 0 ? 0 : value > 255 ? 255 : value;
    // Make the value different from before
    setCount(value-1);
    // Since the value has changed, it triggers rendering
    setCount(value);
    // ------------------------------
    // or
    e.target.value = value;
    setCount(value);
  };
  return (<input value={count()} onInput={onInput}/>);
}

render(() => <Counter />, document.getElementById("app")!);