AntD Select with options Clear incorrect work

[AlexKuznietsov]

FormItem used with AntD Select component. allowClear is enabled. Field default value is passed as object during useForm initialization.

Clear icon behave in strange way - it works in two steps. On first click - value is set at default. If clicked second time - it cleared to undefined. In case of use standard Form.Item there is no such issue - value is set to default on every click as expected.

Screen.Recording.2024-10-12.021126.mp4

In example below shown both cases

(...)
const CustomerDefault: Customer_B_Regular = {
   _gender: 0,                                     // ?: GenderSet,       //Gender
}
(...)

// weird Clear
<FormItem name="order.customer._gender" label="Gender" control={ control }>

    <Select  
        style={{ textAlign: "start" }}
        allowClear
        placeholder="Please select"
        popupMatchSelectWidth={ false }
        options={[{ value:0, label: 'ND' }, { value:1, label: 'Man' }, { value:2, label: 'Woman' } ]} 
    />

</FormItem>

// Clear works fine
<Form.Item name="order.customer._gender" label="Gender2" >

    <Controller
      name="order.customer._gender"
      control={control}
      render={({ field }) => (
        <Select
            {...field}
            style={{ textAlign: "start" }}
            allowClear
            placeholder="Please select"
            popupMatchSelectWidth={ false }
            options={[{ value:0, label: 'ND' }, { value:1, label: 'Man' }, { value:2, label: 'Woman' } ]} 
        />
      )}
    />

</Form.Item>