Skip to content

Commit 0fef8d7

Browse files
QDyanbingQDyanbing
authored
fix: avoid disabled AutoComplete custom input background stacking (ant-design#58114)
1 parent e293f09 commit 0fef8d7

7 files changed

Lines changed: 280 additions & 1 deletion

File tree

‎components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1005,6 +1005,163 @@ Array [
10051005

10061006
exports[`renders components/auto-complete/demo/custom.tsx extend context correctly 2`] = `[]`;
10071007

1008+
exports[`renders components/auto-complete/demo/disabled-custom-debug.tsx extend context correctly 1`] = `
1009+
<div
1010+
class="ant-flex css-var-test-id ant-flex-wrap-wrap"
1011+
style="gap: 12px;"
1012+
>
1013+
<input
1014+
class="ant-input ant-input-disabled ant-input-outlined css-var-test-id ant-input-css-var"
1015+
disabled=""
1016+
placeholder="Regular Input"
1017+
type="text"
1018+
value=""
1019+
/>
1020+
<div
1021+
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-disabled ant-select-customize-input ant-select-show-search"
1022+
>
1023+
<div
1024+
class="ant-select-content"
1025+
>
1026+
<textarea
1027+
aria-autocomplete="list"
1028+
aria-expanded="false"
1029+
aria-haspopup="listbox"
1030+
autocomplete="off"
1031+
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-select-input ant-input-disabled"
1032+
disabled=""
1033+
id="test-id"
1034+
role="combobox"
1035+
type="text"
1036+
/>
1037+
</div>
1038+
</div>
1039+
<div
1040+
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-test-id ant-select-css-var ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
1041+
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
1042+
>
1043+
<div>
1044+
<div
1045+
class="ant-select-item-empty"
1046+
id="test-id_list"
1047+
role="listbox"
1048+
/>
1049+
</div>
1050+
</div>
1051+
<div
1052+
class="ant-select ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow ant-select-disabled"
1053+
>
1054+
<div
1055+
class="ant-select-content"
1056+
>
1057+
<div
1058+
class="ant-select-placeholder"
1059+
style="visibility: visible;"
1060+
/>
1061+
<input
1062+
aria-autocomplete="list"
1063+
aria-expanded="false"
1064+
aria-haspopup="listbox"
1065+
autocomplete="off"
1066+
class="ant-select-input"
1067+
disabled=""
1068+
id="test-id"
1069+
readonly=""
1070+
role="combobox"
1071+
type="search"
1072+
value=""
1073+
/>
1074+
</div>
1075+
<div
1076+
class="ant-select-suffix"
1077+
>
1078+
<span
1079+
aria-label="down"
1080+
class="anticon anticon-down"
1081+
role="img"
1082+
>
1083+
<svg
1084+
aria-hidden="true"
1085+
data-icon="down"
1086+
fill="currentColor"
1087+
focusable="false"
1088+
height="1em"
1089+
viewBox="64 64 896 896"
1090+
width="1em"
1091+
>
1092+
<path
1093+
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
1094+
/>
1095+
</svg>
1096+
</span>
1097+
</div>
1098+
</div>
1099+
<div
1100+
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-test-id ant-select-css-var ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
1101+
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
1102+
>
1103+
<div>
1104+
<div
1105+
class="ant-select-item-empty"
1106+
id="test-id_list"
1107+
role="listbox"
1108+
>
1109+
<div
1110+
class="css-var-test-id ant-empty ant-empty-normal ant-empty-small"
1111+
>
1112+
<div
1113+
class="ant-empty-image"
1114+
>
1115+
<svg
1116+
height="41"
1117+
viewBox="0 0 64 41"
1118+
width="64"
1119+
xmlns="http://www.w3.org/2000/svg"
1120+
>
1121+
<title>
1122+
No data
1123+
</title>
1124+
<g
1125+
fill="none"
1126+
fill-rule="evenodd"
1127+
transform="translate(0 1)"
1128+
>
1129+
<ellipse
1130+
cx="32"
1131+
cy="33"
1132+
fill="#f5f5f5"
1133+
rx="32"
1134+
ry="7"
1135+
/>
1136+
<g
1137+
fill-rule="nonzero"
1138+
stroke="#d9d9d9"
1139+
>
1140+
<path
1141+
d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
1142+
/>
1143+
<path
1144+
d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
1145+
fill="#fafafa"
1146+
/>
1147+
</g>
1148+
</g>
1149+
</svg>
1150+
</div>
1151+
<div
1152+
class="ant-empty-description"
1153+
>
1154+
No data
1155+
</div>
1156+
</div>
1157+
</div>
1158+
</div>
1159+
</div>
1160+
</div>
1161+
`;
1162+
1163+
exports[`renders components/auto-complete/demo/disabled-custom-debug.tsx extend context correctly 2`] = `[]`;
1164+
10081165
exports[`renders components/auto-complete/demo/form-debug.tsx extend context correctly 1`] = `
10091166
<form
10101167
class="ant-form ant-form-horizontal css-var-test-id ant-form-css-var"

‎components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,88 @@ exports[`renders components/auto-complete/demo/custom.tsx correctly 1`] = `
419419
</div>
420420
`;
421421

422+
exports[`renders components/auto-complete/demo/disabled-custom-debug.tsx correctly 1`] = `
423+
<div
424+
class="ant-flex css-var-test-id ant-flex-wrap-wrap"
425+
style="gap:12px"
426+
>
427+
<input
428+
class="ant-input ant-input-disabled ant-input-outlined css-var-test-id ant-input-css-var"
429+
disabled=""
430+
placeholder="Regular Input"
431+
type="text"
432+
value=""
433+
/>
434+
<div
435+
class="ant-select ant-select-outlined ant-select-auto-complete ant-select-customize css-var-test-id ant-select-css-var ant-select-single ant-select-disabled ant-select-customize-input ant-select-show-search"
436+
>
437+
<div
438+
class="ant-select-content"
439+
>
440+
<textarea
441+
aria-autocomplete="list"
442+
aria-expanded="false"
443+
aria-haspopup="listbox"
444+
autocomplete="off"
445+
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var ant-select-input ant-input-disabled"
446+
disabled=""
447+
id="test-id"
448+
role="combobox"
449+
type="text"
450+
/>
451+
</div>
452+
</div>
453+
<div
454+
class="ant-select ant-select-outlined css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow ant-select-disabled"
455+
>
456+
<div
457+
class="ant-select-content"
458+
>
459+
<div
460+
class="ant-select-placeholder"
461+
style="visibility:visible"
462+
/>
463+
<input
464+
aria-autocomplete="list"
465+
aria-expanded="false"
466+
aria-haspopup="listbox"
467+
autocomplete="off"
468+
class="ant-select-input"
469+
disabled=""
470+
id="test-id"
471+
readonly=""
472+
role="combobox"
473+
type="search"
474+
value=""
475+
/>
476+
</div>
477+
<div
478+
class="ant-select-suffix"
479+
>
480+
<span
481+
aria-label="down"
482+
class="anticon anticon-down"
483+
role="img"
484+
>
485+
<svg
486+
aria-hidden="true"
487+
data-icon="down"
488+
fill="currentColor"
489+
focusable="false"
490+
height="1em"
491+
viewBox="64 64 896 896"
492+
width="1em"
493+
>
494+
<path
495+
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
496+
/>
497+
</svg>
498+
</span>
499+
</div>
500+
</div>
501+
</div>
502+
`;
503+
422504
exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
423505
<form
424506
class="ant-form ant-form-horizontal css-var-test-id ant-form-css-var"

‎components/auto-complete/demo/disabled-custom-debug.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## zh-CN
2+
3+
禁用自定义输入组件 Debug。
4+
5+
## en-US
6+
7+
Disabled custom input debug.

‎components/auto-complete/demo/disabled-custom-debug.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { AutoComplete, Flex, Input, Select } from 'antd';
3+
4+
const App: React.FC = () => (
5+
<Flex gap={12} wrap>
6+
<Input disabled placeholder="Regular Input" />
7+
<AutoComplete disabled>
8+
<Input.TextArea disabled />
9+
</AutoComplete>
10+
<Select disabled options={[]} />
11+
</Flex>
12+
);
13+
14+
export default App;

‎components/auto-complete/index.en-US.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ The differences with Select are:
3434
<code src="./demo/variant.tsx" version="5.13.0">Variants</code>
3535
<code src="./demo/allowClear.tsx">Customize clear button</code>
3636
<code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>
37+
<code src="./demo/disabled-custom-debug.tsx" debug>Disabled custom input debug</code>
3738
<code src="./demo/form-debug.tsx" debug>Debug in Form</code>
3839
<code src="./demo/AutoComplete-and-Select.tsx" debug>AutoComplete and Select</code>
3940
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>

‎components/auto-complete/index.zh-CN.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ demo:
3535
<code src="./demo/variant.tsx" version="5.13.0">多种形态</code>
3636
<code src="./demo/allowClear.tsx">自定义清除按钮</code>
3737
<code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>
38+
<code src="./demo/disabled-custom-debug.tsx" debug>禁用自定义输入 Debug</code>
3839
<code src="./demo/form-debug.tsx" debug>在 Form 中 Debug</code>
3940
<code src="./demo/AutoComplete-and-Select.tsx" debug>AutoComplete 和 Select</code>
4041
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>

‎components/select/style/select-input-customize.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,18 @@ import type { GenerateStyle } from '../../theme/interface';
44
import type { SelectToken } from './token';
55

66
const genSelectInputCustomizeStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
7-
const { componentCls } = token;
7+
const { antCls, componentCls } = token;
8+
9+
const transparentBackground: CSSObject = {
10+
background: 'transparent',
11+
};
12+
const disabledCustomizedInputSelector = [
13+
'> input[disabled]',
14+
'> textarea[disabled]',
15+
`> ${componentCls}-input`,
16+
`> ${antCls}-input-affix-wrapper-disabled`,
17+
`> ${antCls}-input-search`,
18+
].join(', ');
819

920
return {
1021
[`&${componentCls}-customize`]: {
@@ -25,6 +36,12 @@ const genSelectInputCustomizeStyle: GenerateStyle<SelectToken, CSSObject> = (tok
2536
display: 'none',
2637
},
2738
},
39+
40+
[`&${componentCls}-disabled ${componentCls}-content`]: {
41+
[disabledCustomizedInputSelector]: transparentBackground,
42+
43+
'input[disabled], textarea[disabled]': transparentBackground,
44+
},
2845
},
2946
};
3047
};

0 commit comments

Comments
 (0)