How to fix flickering issue in table row with Ant Design Table? - css

Question

I am using Ant Design on my React.js application. I used Table component. I have two columns: one for an input number field, and another for input field and will be editable on hover. When I hover on each row, there is a flicker issue which does not happen if I have input number field only or an input field only. When I have them both, it is like having an extra margin top or padding. When I check the dev tools, there were no added styling. I even adjust its min-height but no effect.
Flickering issue when hovering on table row
const columns = [
{
render: (_, { id, value }, index) => {
if (editingRow === id) {
return (
<Form.Item
name="value"
style={{ margin: 0 }}
>
<div onBlur={() => setEditingRow(null)}>
<InputNumber
value={value}
onChange={numValue => {
onChange(
{ id, value: numValue },
);
}}
/>
</div>
</Form.Item>
);
} else {
return (
<Form.Item style={{ margin: 0 }}>
<Input value={value} disabled />
</Form.Item>
);
}
}
},
{
render: (_, { id, title }, index) => {
if (editingRow === id) {
return (
<Form.Item
name="value"
style={{ margin: 0 }}
>
<div onBlur={() => setEditingRow(null)}>
<Input
value={value}
onChange={event => {
event.persist();
onChange(
{ id, title: event.target.value },
);
}}
/>
</div>
</Form.Item>
);
} else {
return (
<Form.Item style={{ margin: 0 }}>
<Input value={value} disabled />
</Form.Item>
);
}
}
},
]