Button disabled state not updating correctly based on input length

[CodeLeom]

I'm encountering an issue with Solid.js where the disabled state of a button is not updating correctly based on the length of an input field.

Here’s a minimal example of my code:

import { createSignal, createMemo } from 'solid-js';

const FeedbackForm = () => {
  const [text, setText] = createSignal('');
  const [msg, setMsg] = createSignal('');

  const btnDisabled = createMemo(() => text().trim().length <= 20);

  const textHandler = (e) => {
    setText(e.target.value);
  };

  const formSubmit = (e) => {
    e.preventDefault();
    if (!btnDisabled()) {
      // Handle form submission
    }
  };

  return (
    <div class="container">
      <form onSubmit={formSubmit}>
        <input
          type="text"
          placeholder="Write your feedback here"
          onInput={textHandler}
          value={text()}
        />
        <button type="submit" class="btn btn-secondary" disabled={btnDisabled()}>
          Submit
        </button>
        {msg() && <span>{msg()}</span>}
      </form>
    </div>
  );
};

export default FeedbackForm;

The button remains disabled even when the input length exceeds 20 characters. Any ideas on what might be wrong?

Thanks in advance for your help!