Bug: does not work onChange Event

[blacktoast]

this code is Input component in islands folder

/** @jsx h */
import { h } from 'preact';
import { tw } from '@twind';
import { useState } from 'preact/hooks';
import { IS_BROWSER } from '$fresh/runtime.ts';

interface InputProps {}

const Input = ({}: InputProps) => {
  const [state, setState] = useState('aa');
  const update = (e: any) => {
    setState('testtt');
  };

  return (
    <input
      onChange={update}
      value={state}
      placeholder="test"
      disabled={!IS_BROWSER}
    ></input>
  );
};

export default Input;

In my opinion, when it is entering the input component, the input value should be fixed as 'test' while the onChange event occurs

That's how it works in react

but in fresh framwork, it does not work this way

in fresh, it works like this video

so I was wondering why fresh framework works this way ?

ps. Although I removed disabled={!IS_BROWSER}, it still did not work

[hyp3rflow]

It is because the fresh uses preact. Sadly, there are some differences between React and Preact.
For example,

1. Preact doesn't actually control the component. Hooks - a little discrepancy between React and Preact preactjs/preact#3175
2. And you need to use onInput instead of onChange if you want to do something same as in React. https://preactjs.com/guide/v10/differences-to-react#use-oninput-instead-of-onchange

These two differences can occur a bug like this :(, If you want to avoid this, you can use preact/compat.
I think It will be awesome if fresh has some option for preact/compat mode. :)...

[hyp3rflow]

So, If you want to get an expected behavior, you have to write the code like this.

/** @jsx h */
import { h } from 'preact';
import { tw } from '@twind';
import { useState } from 'preact/hooks';
import { IS_BROWSER } from '$fresh/runtime.ts';

interface InputProps {}

const Input = ({}: InputProps) => {
  const [state, setState] = useState('aa');
  const update = (e: any) => {
    setState('testtt'); // this will update the state, but sadly the state will not affect to the input value.
+	e.target.value = 'testtt'; // so you have to change the value directly
  };

  return (
    <input
+     onInput={update} // onChange → onInput
      value={state}
      placeholder="test"
      disabled={!IS_BROWSER}
    ></input>
  );
};

export default Input;

[blacktoast]

Wow, Thank you so much.
I got it thanks to your explanation

[ericlery]

Is something as changed since? Do Fresh uses preact/compat now? Because I use onChange, and my code works.