fix(SearchField): Adjust suggestions size to field container (#1399)

https://jira.tid.es/browse/WEB-2260

Can be verified in [this
playroom](https://mistica-qmxu5whg6-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AhCAPABABwIZSgEsA7AcwF5gBGANgF8A%2BAHWM0ySIDdMBnAFwCeAGxiVgmIj2xDcA%2BJiYgAZiPSKANJlK5s8gByY6jFmzYdC3fsNHBxKmOgDiAJwgB3eVUPHWpswGUYXGcwAAsAMUIYISgTP1NiXABbUUUAIxlFOPitGD5-AFdSUhh%2BQghiHkoACgBKTHIGTABtRVxcDQUQNLTOxTAwPpACRQBdOmz4pQKhIQB1Qig%2BUMm2AHpmXzM1rk2-VAK%2BPgqABWdCJOCBTFPnUqrgOoam4CMGM-ukNZRD4%2BIzi5XPbsHYWTZfNDoTYgdQgZYwFI8BDNEAAWQgnEI-GCIFGsLci2WSPgzQA7DQ9OMgA)

---------

Co-authored-by: Pedro Ladaria <pedro.jose.ladaria.linden@telefonica.com>

Author: pladaria

playroom/snippets.tsx

@@ -498,6 +498,10 @@ const formSnippets: Array<Snippet> = [
     ],
     ['CvvField', '<CvvField name="cvv" label="CVV"/>'],
     ['SearchField', '<SearchField name="search" label="Search"/>'],
+    [
+        'SearchField (with suggestions)',
+        '<SearchField name="search2" label="Search" getSuggestions={() => ["aa", "bb", "cc", "dd"]}/>',
+    ],
     ['Switch', '<Switch name="switch"/>'],
     ['Checkbox', '<Checkbox name="checkbox">Checkbox</Checkbox>'],
     [

src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-search-field-with-suggestions-1-snap.png

@@ -385,6 +385,21 @@ test('SearchField', async () => {
     expect(filledScreenshot).toMatchImageSnapshot();
 });
 
+test('SearchField with suggestions', async () => {
+    await openStoryPage({
+        id: 'components-input-fields-searchfield--controlled',
+        device: 'MOBILE_IOS',
+        args: {suggestions: true},
+    });
+
+    const field = await screen.findByLabelText('Label');
+    await field.type('a');
+
+    const screenshot = await page.screenshot({fullPage: true});
+
+    expect(screenshot).toMatchImageSnapshot();
+});
+
 test('DateField', async () => {
     await openStoryPage({
         id: 'components-input-fields-datefield--uncontrolled',

src/__screenshot_tests__/input-fields-screenshot-test.tsx

@@ -474,6 +474,7 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
     ({getSuggestions, id: idProp, ...props}, ref) => {
         const [suggestions, setSuggestions] = React.useState<ReadonlyArray<string>>([]);
         const inputRef = React.useRef<HTMLInputElement>(null);
+        const containerRef = React.useRef<HTMLDivElement>(null);
         const {platformOverrides, texts, t} = useTheme();
         const reactId = React.useId();
         const id = idProp || reactId;
@@ -482,7 +483,6 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
         if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {
             throw Error('Fields with suggestions must be used in controlled mode');
         }
-
         return getSuggestions ? (
             <React.Suspense
                 fallback={
@@ -512,12 +512,20 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                             props.onChange?.(e);
                         },
                     }}
-                    renderInputComponent={(inputProps) => (
-                        <TextFieldBase
-                            {...(inputProps as TextFieldBaseProps)}
-                            inputRef={combineRefs(inputRef, props.inputRef, ref)}
-                        />
-                    )}
+                    renderInputComponent={(inputProps) => {
+                        // The `Autosuggest.RenderInputComponentProps` type is missing the `key` property
+                        const {key, ...inputPropsWithoutKey} = inputProps as Record<string, any>;
+                        // extract key from inputProps to avoid React warning:
+                        // "A props object containing a "key" prop is being spread into JSX"
+                        return (
+                            <TextFieldBase
+                                key={key}
+                                {...(inputPropsWithoutKey as TextFieldBaseProps)}
+                                fieldRef={containerRef}
+                                inputRef={combineRefs(inputRef, props.inputRef, ref)}
+                            />
+                        );
+                    }}
                     suggestions={suggestions}
                     onSuggestionsFetchRequested={({value}) => setSuggestions(getSuggestions(value))}
                     onSuggestionsClearRequested={() => setSuggestions([])}
@@ -532,18 +540,24 @@ export const TextFieldBaseAutosuggest = React.forwardRef<any, TextFieldBaseProps
                             <Text3 regular>{suggestion}</Text3>
                         </div>
                     )}
-                    renderSuggestionsContainer={(options) => (
-                        <div
-                            {...options.containerProps}
-                            style={{
-                                width: inputRef.current ? inputRef.current.clientWidth + 2 : 0, // +2 due to borders (input)
-                            }}
-                            className={styles.suggestionsContainer}
-                            aria-label={`${props.label} ${texts.menuLabelSuffix || t(tokens.menuLabelSuffix)}`}
-                        >
-                            {options.children}
-                        </div>
-                    )}
+                    renderSuggestionsContainer={(options) => {
+                        // extract key from containerProps to avoid React warning:
+                        // "A props object containing a "key" prop is being spread into JSX"
+                        const {key, ...containerPropsWithoutKey} = options.containerProps;
+                        return (
+                            <div
+                                {...containerPropsWithoutKey}
+                                key={key}
+                                style={{
+                                    width: containerRef.current ? containerRef.current.clientWidth + 2 : 0, // +2 due to borders (input)
+                                }}
+                                className={styles.suggestionsContainer}
+                                aria-label={`${props.label} ${texts.menuLabelSuffix || t(tokens.menuLabelSuffix)}`}
+                            >
+                                {options.children}
+                            </div>
+                        );
+                    }}
                 />
             </React.Suspense>
         ) : (