Skip to content

Commit ba083dd

Browse files
iharshyadavheath-freenome
iharshyadav
and
heath-freenome
authored
fix: normalize types in datalist comparison to prevent duplicate React keys (closes #4927) (#4937)
* fix: normalize types in datalist comparison to prevent duplicate React keys (closes #4927) * refactor: extract datalist logic into reusable SchemaExamples component - Created SchemaExamples component in @rjsf/core to centralize datalist rendering logic - Exported SchemaExamples from core package for use in all themes - Updated BaseInputTemplate in core and all 9 themes (antd, chakra-ui, daisyui, fluentui-rc, mantine, mui, react-bootstrap, semantic-ui, shadcn) to use the shared SchemaExamples component - Fixed CHANGELOG.md: moved @rjsf/core to alphabetical order and updated links to reference issue #4927 instead of PR This eliminates code duplication across packages and improves maintainability. * docs: add JSDoc to SchemaExamples, remove PR_DESCRIPTION.txt, add formTests coverage * test: update snapshots for schema examples with mixed types * Apply suggestions from code review Fixed changelog --------- Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>
1 parent 7340c4b commit ba083dd

File tree

26 files changed

+2132
-706
lines changed

26 files changed

+2132
-706
lines changed

‎CHANGELOG.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,47 @@ should change the heading of the (upcoming) version to include a major version b
1616
1717
-->
1818

19+
# 6.2.6
20+
21+
## @rjsf/antd
22+
23+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
24+
25+
## @rjsf/chakra-ui
26+
27+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
28+
29+
## @rjsf/core
30+
31+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
32+
33+
## @rjsf/daisyui
34+
35+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
36+
37+
## @rjsf/fluentui-rc
38+
39+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
40+
41+
## @rjsf/mantine
42+
43+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
44+
45+
## @rjsf/mui
46+
47+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
48+
49+
## @rjsf/react-bootstrap
50+
51+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
52+
53+
## @rjsf/semantic-ui
54+
55+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
56+
57+
## @rjsf/shadcn
58+
59+
- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
1960
# 6.2.5
2061

2162
## @rjsf/mui

‎packages/antd/src/templates/BaseInputTemplate/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
RJSFSchema,
1111
StrictRJSFSchema,
1212
} from '@rjsf/utils';
13+
import { SchemaExamples } from '@rjsf/core';
1314

1415
const INPUT_STYLE = {
1516
width: '100%',
@@ -107,15 +108,7 @@ export default function BaseInputTemplate<
107108
{options.allowClearTextInputs && !readonly && !disabled && value && (
108109
<ClearButton registry={registry} onClick={handleClear} />
109110
)}
110-
{Array.isArray(schema.examples) && (
111-
<datalist id={examplesId(id)}>
112-
{(schema.examples as string[])
113-
.concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
114-
.map((example) => {
115-
return <option key={example} value={example} />;
116-
})}
117-
</datalist>
118-
)}
111+
<SchemaExamples id={id} schema={schema} />
119112
</>
120113
);
121114
}

‎packages/antd/test/__snapshots__/Form.test.tsx.snap‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14375,6 +14375,148 @@ exports[`single fields schema examples 1`] = `
1437514375
</DocumentFragment>
1437614376
`;
1437714377

14378+
exports[`single fields schema examples with mixed types (string examples and number default) 1`] = `
14379+
<DocumentFragment>
14380+
<form
14381+
class="rjsf"
14382+
>
14383+
<div
14384+
class="rjsf-field rjsf-field-integer"
14385+
>
14386+
<div
14387+
class="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
14388+
>
14389+
<div
14390+
class="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
14391+
>
14392+
<div
14393+
class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
14394+
>
14395+
<div
14396+
class="ant-form-item-control-input"
14397+
>
14398+
<div
14399+
class="ant-form-item-control-input-content"
14400+
>
14401+
<div
14402+
class="ant-input-number-affix-wrapper css-dev-only-do-not-override-ac2jek ant-input-number-outlined ant-input-number-has-feedback"
14403+
style="width: 100%;"
14404+
>
14405+
<div
14406+
class="ant-input-number ant-input-number-in-form-item css-dev-only-do-not-override-ac2jek"
14407+
>
14408+
<div
14409+
class="ant-input-number-handler-wrap"
14410+
>
14411+
<span
14412+
aria-disabled="false"
14413+
aria-label="Increase Value"
14414+
class="ant-input-number-handler ant-input-number-handler-up"
14415+
role="button"
14416+
unselectable="on"
14417+
>
14418+
<span
14419+
aria-label="up"
14420+
class="anticon anticon-up ant-input-number-handler-up-inner"
14421+
role="img"
14422+
>
14423+
<svg
14424+
aria-hidden="true"
14425+
data-icon="up"
14426+
fill="currentColor"
14427+
focusable="false"
14428+
height="1em"
14429+
viewBox="64 64 896 896"
14430+
width="1em"
14431+
>
14432+
<path
14433+
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
14434+
/>
14435+
</svg>
14436+
</span>
14437+
</span>
14438+
<span
14439+
aria-disabled="false"
14440+
aria-label="Decrease Value"
14441+
class="ant-input-number-handler ant-input-number-handler-down"
14442+
role="button"
14443+
unselectable="on"
14444+
>
14445+
<span
14446+
aria-label="down"
14447+
class="anticon anticon-down ant-input-number-handler-down-inner"
14448+
role="img"
14449+
>
14450+
<svg
14451+
aria-hidden="true"
14452+
data-icon="down"
14453+
fill="currentColor"
14454+
focusable="false"
14455+
height="1em"
14456+
viewBox="64 64 896 896"
14457+
width="1em"
14458+
>
14459+
<path
14460+
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"
14461+
/>
14462+
</svg>
14463+
</span>
14464+
</span>
14465+
</div>
14466+
<div
14467+
class="ant-input-number-input-wrap"
14468+
>
14469+
<input
14470+
aria-describedby="root__error root__description root__help root__examples"
14471+
aria-valuenow="5432"
14472+
autocomplete="off"
14473+
class="ant-input-number-input"
14474+
id="root"
14475+
list="root__examples"
14476+
name="root"
14477+
placeholder=""
14478+
role="spinbutton"
14479+
step="1"
14480+
type="number"
14481+
value="5432"
14482+
/>
14483+
</div>
14484+
</div>
14485+
<span
14486+
class="ant-input-number-suffix"
14487+
/>
14488+
</div>
14489+
<datalist
14490+
id="root__examples"
14491+
>
14492+
<option
14493+
value="5432"
14494+
/>
14495+
<option
14496+
value="3306"
14497+
/>
14498+
<option
14499+
value="1433"
14500+
/>
14501+
</datalist>
14502+
</div>
14503+
</div>
14504+
</div>
14505+
</div>
14506+
</div>
14507+
</div>
14508+
<button
14509+
class="ant-btn css-dev-only-do-not-override-ac2jek ant-btn-submit"
14510+
type="submit"
14511+
>
14512+
<span>
14513+
Submit
14514+
</span>
14515+
</button>
14516+
</form>
14517+
</DocumentFragment>
14518+
`;
14519+
1437814520
exports[`single fields select field 1`] = `
1437914521
<DocumentFragment>
1438014522
<form

‎packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
RJSFSchema,
1111
StrictRJSFSchema,
1212
} from '@rjsf/utils';
13+
import { SchemaExamples } from '@rjsf/core';
1314

1415
import { Field } from '../components/ui/field';
1516
import { getChakra } from '../utils';
@@ -85,15 +86,7 @@ export default function BaseInputTemplate<
8586
{options.allowClearTextInputs && !readonly && !disabled && value && (
8687
<ClearButton registry={registry} onClick={onClear} />
8788
)}
88-
{Array.isArray(schema.examples) ? (
89-
<datalist id={examplesId(id)}>
90-
{(schema.examples as string[])
91-
.concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
92-
.map((example: any) => {
93-
return <option key={example} value={example} />;
94-
})}
95-
</datalist>
96-
) : null}
89+
<SchemaExamples id={id} schema={schema} />
9790
</Field>
9891
);
9992
}

0 commit comments

Comments
 (0)