diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index eac0d13cf5..6c3968548a 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -718,3 +718,16 @@ const MyInput = (props) => ( ; ``` + +### Why does clicking the label in the form change the component state? + +> Related issue: [#47031](https://github.com/ant-design/ant-design/issues/47031), [#43175](https://github.com/ant-design/ant-design/issues/43175), [#52152](https://github.com/ant-design/ant-design/issues/52152) + +Form label use [HTML label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) elements to wrap form controls, which focuses the corresponding control when clicked. This is the native behavior of label elements, designed to improve accessibility and user experience. This standard interaction pattern makes it easier for users to interact with form controls. If you need to disable this behavior, you can use `htmlFor={null}`, though it's generally not recommended. + +```diff +- ++ + + +``` diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 093e094c9b..5fa7fd0058 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -718,6 +718,19 @@ const MyInput = (props) => ( ; ``` +### 为什么表单点击 label 会更改组件状态? + +> 相关 issue:[#47031](https://github.com/ant-design/ant-design/issues/47031),[#43175](https://github.com/ant-design/ant-design/issues/43175), [#52152](https://github.com/ant-design/ant-design/issues/52152) + +表单 label 使用 [HTML label](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label) 元素来包裹表单控件,从而实现点击 label 时聚焦到对应控件。这是 label 元素的原生行为,用于提升可访问性和用户体验,这种标准交互模式能让用户更容易操作表单控件。如果你不希望这种行为,可通过 `htmlFor={null}` 属性解除关联,通常不建议这样做。 + +```diff +- ++ + + +``` + ### 有更多参考文档吗? - 你可以阅读[《antd v4 Form 使用心得》](https://zhuanlan.zhihu.com/p/375753910)获得一些使用帮助以及建议。 diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx index d4b7797d61..fcc81d308f 100644 --- a/components/table/InternalTable.tsx +++ b/components/table/InternalTable.tsx @@ -119,7 +119,7 @@ export interface InternalTableProps extends TableProps( props: InternalTableProps, - ref: React.MutableRefObject, + ref: React.Ref, ) => { const { prefixCls: customizePrefixCls, @@ -615,4 +615,4 @@ const InternalTable = ( ); }; -export default React.forwardRef(InternalTable as any) as RefInternalTable; +export default React.forwardRef(InternalTable) as RefInternalTable; diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap index f7a5e911d9..416476fbf4 100644 --- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -93,8 +93,8 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
@@ -235,8 +235,8 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
@@ -282,7 +282,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = ` /> - showLine: + showLine:
@@ -4271,8 +4271,8 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
@@ -4318,7 +4318,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = ` /> { { ; -const NormalCheckDemo = () => ; +const NormalCheckDemo = () => ( + +); const NormalDragDemo = () => ; diff --git a/components/tree/demo/multiple-line.tsx b/components/tree/demo/multiple-line.tsx index d7db44abf9..4c7c8518c6 100644 --- a/components/tree/demo/multiple-line.tsx +++ b/components/tree/demo/multiple-line.tsx @@ -45,7 +45,7 @@ const App: React.FC = () => { nodeSelectedBg, nodeHoverBg, colorTextQuaternary, + controlItemBgActiveDisabled, } = token; - return { [treeCls]: { ...resetComponent(token), @@ -199,6 +199,11 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => }, }, + [`${treeCls}-checkbox-disabled + ${treeCls}-node-selected,&${treeNodeCls}-disabled${treeNodeCls}-selected ${treeCls}-node-content-wrapper`]: + { + backgroundColor: controlItemBgActiveDisabled, + }, + // not disable [`&:not(${treeNodeCls}-disabled)`]: { // >>> Title diff --git a/package.json b/package.json index b36ee5c2a6..179ef5ee4d 100644 --- a/package.json +++ b/package.json @@ -141,7 +141,7 @@ "rc-resize-observer": "^1.4.3", "rc-segmented": "~2.7.0", "rc-select": "~14.16.4", - "rc-slider": "~11.1.7", + "rc-slider": "~11.1.8", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.50.1", @@ -346,9 +346,11 @@ "mode": "npm" }, "overrides": { - "nwsapi": "2.2.13" + "nwsapi": "2.2.13", + "react-intl": "7.0.4" }, "resolutions": { - "nwsapi": "2.2.13" + "nwsapi": "2.2.13", + "react-intl": "7.0.4" } }