fix(Datalist/TDOPS-2632): update data list entry if name is not the s…

…ame (#4250)

* fix(Datalist): update data list entry if name is not the same

* fix(Datalist/TDOPS-2632): update data list entry if name is not the same

* fix(Datalist/TDOPS-2632): update data list entry if name is not the same

* @VolodymyrKovalM

* fix(Datalist/TDOPS-2632): update data list entry if name is not the same

.changeset/thirty-llamas-act.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix(Datalist/TDOPS-2632): update data list entry if name is not the same

packages/components/src/Datalist/Datalist.component.js

@@ -143,7 +143,7 @@ function Datalist(props) {
 			return;
 		}
 
-		if (entry.value !== value) {
+		if (entry.value !== value || entry.name !== name) {
 			setEntry(entry);
 		}
 		// Update the input value only if user did not change it

packages/components/src/Datalist/Datalist.component.test.js

@@ -294,6 +294,42 @@ describe('Datalist component', () => {
 		expect(screen.getByRole('textbox')).toHaveValue('a');
 	});
 
+	it('should update entry if value or name in new entry are not the same as in selected entry', () => {
+		// given
+		const testProps = {
+			id: 'my-datalist',
+			value: 'foo',
+			onChange: jest.fn(),
+			...props,
+		};
+
+		// when
+		const { rerender } = render(<Datalist {...testProps} />);
+
+		// then
+		expect(screen.getByRole('textbox')).toHaveValue('My foo');
+
+		const newTitleMap = [
+			{ name: 'Entry one', value: 'entry_one' },
+			{ name: 'Entry two', value: 'entry_two' },
+			{ name: 'Entry three', value: 'entry_three' },
+		];
+
+		// when data list is rendered with new title map and value from old title map
+		rerender(<Datalist {...testProps} titleMap={newTitleMap} />);
+
+		// then filter value is entry value from old title map
+		expect(screen.getByRole('textbox')).toHaveValue(testProps.value);
+
+		// when data list is rendered one more time with value from new title map
+		rerender(
+			<Datalist {...testProps} titleMap={newTitleMap} value={newTitleMap[0].value} />,
+		);
+
+		// then entry is updated and filter value is new entry name
+		expect(screen.getByRole('textbox')).toHaveValue(newTitleMap[0].name);
+	});
+
 	it('should set highlight on current value suggestion', () => {
 		// given
 		render(<Datalist id="my-datalist" onChange={jest.fn()} {...props} value="foo" />);