Passing onBlur to an input clears the value when the blur event happens

[danielo515]

Describe the bug

Hello. Thanks for a library that is able to work with so many view libraries, it's a life saver. I was trying to create a reusable component and I am facing the weird situation that, when the blur event happens then the value of the input is cleared. I'm not sure why this happens, but I noticed that not passing the onBlur callback to the input doesn't seem to have a negative impact and then things work. In any case, I want to make sure that this is ok (or intended). It's worth mentioning that I'm using hope-ui for creating the inputs.

Another bug that I was facing is that, if using the onInput callback instead of the onChange it triggers a maximum call stack exceeded, but that is a different story.

Which package/s are you using?

@felte/solid (SolidJS), @felte/validator-zod

Environment

• OS: MaC
• Browser: Chrome
• Version: [email protected]

To reproduce

1. Create an input using createField and provide the onBlur callback to the input
2. put a value on the input, then click outside the input
3. See how the value is reset to an empty value Below is a code sample

import { createField } from '@felte/core';
import { FormControl, FormLabel, Input, Button } from '@hope-ui/solid';
import { Component } from 'solid-js';
import { ayer } from '~/lib/dates/ayer';
import { formatDateTwoDigits } from '~/lib/dates/formatDate';

type Props = {
  name: string;
};

export const DateInput: Component<Props> = (p) => {
  const { field, onChange, onBlur } = createField(p.name);
  return (
    <FormControl gap="$2" display="flex" alignItems="stretch">
      <FormLabel flex={1} gap="$4">
        Fecha
        <Input
          ref={field}
          // onBlur={onBlur}
          type="date"
          // onInput={(e) => onInput(e.currentTarget.value)}
          onChange={(e) => onChange(e.currentTarget.value)}
        ></Input>
      </FormLabel>

      <div class="flex flex-col justify-end mb-1">
        <Button onClick={() => onChange(formatDateTwoDigits(ayer()))}>Ayer</Button>
      </div>
    </FormControl>
  );
};

Small reproduction example

https://codesandbox.io/s/onblurerror-q51014

Screenshots

No response

Additional context

No response