Date input with css rule for empty value behave like it has value on init

[alex-clear]

Hi
We have form with input type date.
We define them like below

<Input
      ref={ref}
      id={guid}
      type="date"
      icon="calendar"
      max="2999-12-31"
      pr={4}
      sx={{
        zIndex: 1,
        background: 'transparent',
        ':focus': {
          outline: 'none',
        },
        '::-webkit-datetime-edit': {
          color:  'lightgray'
        },
        '::-webkit-calendar-picker-indicator': {
          opacity: 0,
        },
        ':disabled': {
          color: 'neutralsPlaceholderGray',
          borderColor: 'neutralsLightGray',
          bg: 'neutralsBackgroundGray',
        },
        ':disabled::-webkit-datetime-edit': {
          color: 'neutralsBorderGray',
        },
        '::-webkit-date-and-time-value': {
          textAlign: 'left',
        },
        ':before': {
          content: 'attr(placeholder)',
          color: 'lightgray',
          width: '100%',
        },
        ':not([value=""]):before, :focus:before': {
          content: '""',
          width: 0,
        },
      }}
    />

As you can see we define before style via css
If there is no value in input and input does not has focus in should show placeholder (which we pass as prop)
The case here that on form render, the value is empty (when we print value of input in console), but it behave like it has the value and does not shows placeholder at all

We register the form like below

const {
    register,
    handleSubmit,
    formState: { errors, isValid, isDirty, dirtyFields },
    setValue,
    getValues,
    trigger
  } = useForm<FormProps>({
    mode: 'onChange',
    defaultValues: {
      dateInput: '',
    },
  })

version: 7.43.9

Any chance that anyone faced with such behaviour and can provide his solution?

[leapful]

@alex-clear

Please provide a codesandbox url to re-produce the issue. Only your code implementation on the input component does not help to investigate the root cause since it can be caused by 3rd party UI lib or side-effect global styling...