fix: combobox rendered text when value prop changes

.changeset/long-buses-yawn.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+Fixed a visual bug for Combobox component when value is updated externally

packages/strapi-design-system/src/Combobox/Combobox.tsx

@@ -191,6 +191,15 @@ export const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInpu
       skipWhen: !internalIsOpen,
     });
 
+    React.useEffect(() => {
+      /**
+       * When the value prop changes "externally" update the text input value too
+       */
+      handleTextValueChange(value || '');
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
     const hintId = `${generatedId}-hint`;
     const errorId = `${generatedId}-error`;
 

packages/strapi-design-system/src/Combobox/__tests__/Combobox.spec.tsx

@@ -71,6 +71,19 @@ describe('Combobox', () => {
     expect(getByRole('combobox')).toHaveValue('Strawberry 2');
   });
 
+  it('should correctly change the rendered text value of the combobox when the value prop changes externally', async () => {
+    const onTextValueChange = jest.fn();
+    const { rerender } = renderRTL(<Component options={defaultOptions} onTextValueChange={onTextValueChange} />);
+
+    expect(onTextValueChange).toHaveBeenCalledTimes(1);
+    expect(onTextValueChange).toHaveBeenCalledWith('');
+
+    rerender(<Component options={defaultOptions} onTextValueChange={onTextValueChange} value="bagel" />);
+
+    expect(onTextValueChange).toHaveBeenCalledTimes(2);
+    expect(onTextValueChange).toHaveBeenCalledWith('bagel');
+  });
+
   describe('callbacks', () => {
     it('should fire onChange only when the value is changed not when the input does', async () => {
       const onChange = jest.fn();