Mobs Posts - Answer Overflow

Mobs

Posts Comments

SSolidJS

•Created by Mobs on 6/27/2024 in #support

Running into ambiguous error

5 replies

SSolidJS

•Created by Mobs on 3/18/2024 in #support

Set search params after navigate

Hi, how do I set search params after I navigate to a new path?

2 replies

SSolidJS

•Created by Mobs on 2/8/2024 in #support

[SOLVED] Textfield patterns (input masks)

Hello, I am working on something where I want to no allow the user to delete a certain part of text in an input.

function CustomInput() {
  // Define state for the input value
  const [value, setValue] = createSignal(".meas example foo ");

  // Function to handle changes to the input value
  function handleChange(event: any) {
    const inputValue = event.target.value;

    // Check if the user tries to modify the static parts ".meas" or "foo"
    const regex = /^\.meas\s[a-zA-Z]+\sfoo\s/;
    if (inputValue.match(regex)) {
      setValue(inputValue);
    }
  }

  return (
    <input 
      type="text" 
      value={value()}
      onInput={handleChange} 
      pattern="\.meas\s([a-zA-Z]+)\sfoo\s(.*)"
    />
  );
}

function CustomInput() {
  // Define state for the input value
  const [value, setValue] = createSignal(".meas example foo ");

  // Function to handle changes to the input value
  function handleChange(event: any) {
    const inputValue = event.target.value;

    // Check if the user tries to modify the static parts ".meas" or "foo"
    const regex = /^\.meas\s[a-zA-Z]+\sfoo\s/;
    if (inputValue.match(regex)) {
      setValue(inputValue);
    }
  }

  return (
    <input 
      type="text" 
      value={value()}
      onInput={handleChange} 
      pattern="\.meas\s([a-zA-Z]+)\sfoo\s(.*)"
    />
  );
}

I have something like this, but the input's display value does not get updated if the pattern fails to match. What I want to achieve is if the user tries to delete the area of text that is not supposed to be touched we don't update state and the same should be reflected in the UI.

23 replies

SSolidJS

•Created by Mobs on 9/15/2023 in #support

Testing state update after api call`

Hello I am trying to test a register user component and I want to show an error message if I get an error from the rest api. Getting the element fails even after state is updated. This is to submit the user register form

  async function handleSubmit(e) {
    e.preventDefault();
    (...)
    setLoading(true);
    try {
      const resp = await UserService.register(formData);
      (...)
    } catch (err) {
      setLoading(false);
      (...)
      setRegistrationError(true);
    }
  }

  async function handleSubmit(e) {
    e.preventDefault();
    (...)
    setLoading(true);
    try {
      const resp = await UserService.register(formData);
      (...)
    } catch (err) {
      setLoading(false);
      (...)
      setRegistrationError(true);
    }
  }

Where its supposed to show:

<Show when={registrationError()}>
  <AuthError message={errorMsg()} />
</Show>

<Show when={registrationError()}>
  <AuthError message={errorMsg()} />
</Show>

Test:

  test("Register error", async () => {
    render(() => <Register mocki18n={/*@once*/ i18n} />);
     (...)
     const sign_up_btn = screen.getByRole("button");
     fireEvent.click(sign_up_btn);
     expect(
          // element not found
          screen.getByText(RegExp(`User with ${email} already exists!`))
     ).toBeInTheDocument();
  });

  test("Register error", async () => {
    render(() => <Register mocki18n={/*@once*/ i18n} />);
     (...)
     const sign_up_btn = screen.getByRole("button");
     fireEvent.click(sign_up_btn);
     expect(
          // element not found
          screen.getByText(RegExp(`User with ${email} already exists!`))
     ).toBeInTheDocument();
  });

This works as expected when tested manually.

2 replies

Gaming

Programming