How to get focus on error when using Combobox or DatePicker?

[nativedone]

After trying locally, I saw that even the example in the documentation site does not handle it.

Any idea how to fix this?

[nativedone]

The errors, as you can see, are there but the elements do not get their focus state activated.

[nativedone]

In case someone else is trying to fix this:

The issue can be fixed by updating the CSS of the trigger button:

<PopoverTrigger asChild >
          <FormControl >
            <Button
              ref={ref}
              variant={"outline"}
              className={cn(
                "w-[240px] pl-3 text-left font-normal focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                !date && "text-muted-foreground"
              )}
              {...props}
            >
              {date ? format(date, "PPP") : <span>Pick a date</span>}
              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
            </Button>
          </FormControl>
  </PopoverTrigger>

I've just added focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 to the trigger style.

If it still does not work for you, check if the ref is forwarded accordingly.

[sohailxdev]

not working what should i pass in ref