[BUG] - Validation Inconsistency

[Rain-YuXia]

NextUI Version

2.4.8

Describe the bug

Input and Select validation behaviour is different.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

When I set isRequired on both Input & Select, the select dropdown uses HTML built-in validation. However, the input box doesn't.

From the screenshots below, you can see the validation error pops up for Select, but not for Input

Expected behavior

They should behave in the same way.

Screenshots or Videos

Operating System Version

Mac

Browser

Chrome

[linear[bot]]

ENG-1474 [BUG] - Validation Inconsistency

[wingkwong]

Can you share the exact code of those components shown in the screenshot? A sandbox would be better.

[Rain-YuXia]

Sorry I couldn't figure out how to work with a Sandbox lol... My code is more or less like below:

<form onSubmit={submit}>
    <Select
        label="Type of Property"
        labelPlacement="outside-left"
        isRequired
        aria-label="Type of Property"
        variant="bordered"
        placeholder="Select the Property Type"
        isInvalid={!!errors.property_type_id}
        errorMessage={errors.property_type_id}
        selectedKeys={[data.property_type_id]}
        onChange={(e) => {updateListingHandler('property_type_id', e.target.value)}}
    >
        {
            category.property_types.map((item) => (
                <SelectItem key={item.id}>
                    {item.name}
                </SelectItem>
            ))
        }
    </Select>

    <Input
          label="$ Per Annum"
          labelPlacement="outside-left"
          isRequired
          size="md"
          variant="bordered"
          startContent={
              <div className="pointer-events-none flex items-center">
                  <span className="text-default-400 text-small">$</span>
              </div>
          }
          value={formatNumber(data.value_per_annum)}
          onValueChange={(v) => updateListingHandler('value_per_annum', v)}
      />
</form>

Then when the form is submitting with empty data in Type of Property, it doesn't trigger onSubmit event and pop-up the built-in validation error.

However, if the $ per Annum is empty, no built-in validation triggered and the code can go to submit function.

Hope I made myself clear lol

[jijiseong]

Try this. The pop-up still doesn`t appear. but focus and highlight work.

    <Input isRquired validationBehavior="native" />

@wingkwong input uses domRef instead of the original ref. So the pop-up doesn't appear. Is this intentional?

// use-input.ts line 363

 const getInputProps: PropGetter = useCallback(
    (props = {}) => {
      return {
        ref: domRef,
        //...
      };
      //....
    },

    [
      //...
    ],
  );

[Rain-YuXia]

Try this. The pop-up still doesn`t appear. but focus and highlight work.

    <Input isRquired validationBehavior="native" />

@wingkwong input uses domRef instead of the original ref. So the pop-up doesn't appear. Is this intentional?

// use-input.ts line 363

 const getInputProps: PropGetter = useCallback(
    (props = {}) => {
      return {
        ref: domRef,
        //...
      };
      //....
    },

    [
      //...
    ],
  );

Thanks for the reply.

But I prefer to disable the native validation behaviour for Select, since I have my own validation logics.

As I found out, Input and DatePicker both have disabled the native behaviour. However, Select hasn't. I think it's a inconsistency.

And setting validationBehavior="aria" on Select doesn't disable the built-in validation.

[wingkwong]

@jijiseong the original ref is passed to useDomRef. In select, there is a hidden native select / input where input component doesn't have it. Maybe the validation part is different here. Need to dig a bit to see if it is related.

[jijiseong]

would you assign to me? I'll try to fix it.

[wingkwong]

@jijiseong assigned. thanks.