What’s New in Ant Design 4.20.0? Explore the Latest Frontend Features

Editor’s note: Ant Design 4.20.0 has been officially released, and this article walks through its new features.

🔥 Support for React 18 and Strict Mode.

🐞 Fixed Form error message updates in React 18 StrictMode.

🐞 Fixed Notification and Message warnings about createRoot in React 18.

🐞 Fixed BackTop component not working under Strict Mode.

🔥 Added Segmented controller component.

🛠 In version 4.20.0, Segmented’s onChange callback now receives the selected value instead of a ChangeEvent. Adjust your code if you used the alpha releases.

Form

🔥 Added useWatch to retrieve current field values.

🆕 Added useFormInstance to access the Form instance from context.

💄 Fixed layout issues when labelCol={{ sm: 24 }} and wrapperCol={{ sm: 24 }}.

🛎 Menu now supports an items data structure for future performance improvements; children will be deprecated in the next major version.

🆕 Image PreviewGroup now supports top‑progress rendering.

Upload

🆕 Upload picture‑card mode can configure the image’s crossOrigin attribute.

🐞 Fixed Upload prefixCls not applying to list items.

💄 Refined the style of the Upload action button.

Table

🆕 When resetting column filter conditions, the default value is restored instead of an empty value.

💄 Fixed background color and column width style issues when size="small".

🇩🇪 Added German internationalization strings.

⚡️ Optimized filter list computation performance.

💄 Adjusted dropdown margin styles for size="small" and size="middle".

Tree

🆕 switcherIcon property now supports a render‑prop.

🆕 Tree supports rootClassName and rootStyle.

Breadcrumb

🐞 Fixed deprecated placement warning.

🐞 Fixed unexpected numeric symbols in the display.

⌨️ Added accessibility support for breadcrumb hierarchy.

Anchor

🆕 getCurrentAnchor now returns the default highlighted item.

🛠 Refactored Anchor as a function component.

Cascader

🆕 Added showCheckedStrategy to configure the backfill method.

🐞 Fixed Cascader search results not occupying the full panel.

🆕 Typography onCopy now provides the click event object.

🆕 Grid now supports justify="space-evenly".

🆕 Dialog and Image now support rootClassName attribute.

🐞 Fixed Skeleton warning when loading is false and no children are provided.

💄 Optimized Switch disabled color for non‑white backgrounds.

💄 Removed Tabs overflow:hidden style to fix Select and sticky Table display issues inside Tabs.

💄 Fixed Steps styling in RTL mode.

💄 Fixed Badge animation when used alone in RTL mode.

🛠 Optimized Modal id generation for better accessibility.

🐞 Fixed abnormal behavior when using keyboard to scroll down in Select and AutoComplete.

Spin

💄 Fixed Spin animation style parsing issue with Parcel.

⌨️ Added aria attributes to Spin for improved accessibility.

⌨️ Dropdown now supports arrow‑key navigation.

🐞 Fixed Title, Text, Paragraph components not supporting ref.

Input

💄 Input.Group now shields Form.Item styles from its children.

💄 Adjusted TextArea style under Form.

⌨️ Fixed missing aria-checked attribute on Checkbox, improving screen‑reader recognition.

Less

💄 Replaced html selector with corresponding variable.

💄 Changed danger value from function to variable.

🐞 Fixed arrow border radius to a fixed 2px variable.

TypeScript

🤖 Fixed generic issue in UploadChangeParam<T> where fileList did not use the generic type.

🤖 Updated TypeScript definitions to be compatible with @types/react@18.

Official release notes: https://github.com/ant-design/ant-design/releases/tag/4.20.0