Merge pull request #33178 from tkrotoff/react-places-autocomplete-attr-undefined

Various fixes for react-places-autocomplete

types/react-places-autocomplete/index.d.ts

@@ -53,24 +53,24 @@ export interface PropTypes {
             role: 'combobox';
             'aria-autocomplete': 'list';
             'aria-expanded': boolean;
-            'aria-activedescendant': string | null;
+            'aria-activedescendant': string | undefined;
             disabled: boolean;
             onKeyDown: React.KeyboardEventHandler;
-            onBlur: () => void;
+            onBlur: React.FocusEventHandler;
             value: string | undefined;
             onChange: (ev: { target: { value: string }}) => void;
         } & InputProps;
         getSuggestionItemProps: <SuggestionProps extends {}>(suggestion: Suggestion, options?: SuggestionProps) => {
             key: number;
-            id: string | null;
+            id: string | undefined;
             role: 'option';
-            onMouseEnter: () => void;
-            onMouseLeave: () => void;
+            onMouseEnter: React.MouseEventHandler;
+            onMouseLeave: React.MouseEventHandler;
             onMouseDown: React.MouseEventHandler;
-            onMouseUp: () => void;
-            onTouchStart: () => void;
-            onTouchEnd: () => void;
-            onClick: (event?: Event) => void;
+            onMouseUp: React.MouseEventHandler;
+            onTouchStart: React.TouchEventHandler;
+            onTouchEnd: React.TouchEventHandler;
+            onClick: React.MouseEventHandler;
         } & SuggestionProps;
     }>) => React.ReactNode;
 }

types/react-places-autocomplete/react-places-autocomplete-tests.tsx

@@ -31,18 +31,30 @@ class Test extends React.Component {
         return (
             <form onSubmit={this.handleFormSubmit}>
                 <PlacesAutocomplete value={this.state.address} onChange={this.onChange} googleCallbackName="google_callback_name">
-                    {({getInputProps, getSuggestionItemProps, suggestions}) => (
-                        <>
-                            <input {...getInputProps()} />
-                            <div>
-                                {suggestions.map(suggestion => (
-                                    <div {...getSuggestionItemProps(suggestion)} >
-                                        {suggestion.description}
-                                    </div>
-                                ))}
-                            </div>
-                        </>
-                    )}
+                    {({getInputProps, suggestions, getSuggestionItemProps, loading}) => {
+                        const inputProps = getInputProps({
+                            required: true,
+                            className: loading ? 'is-pending' : ''
+                        });
+                        return (
+                            <>
+                                <input {...inputProps} />
+                                <div>
+                                    {suggestions.map(suggestion => {
+                                        const divProps = getSuggestionItemProps(suggestion, {
+                                            className: suggestion.active ? 'active' : ''
+                                        });
+                                        return (
+                                            <div {...divProps}>
+                                                {suggestion.description}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </>
+                        );
+                    }
+                }
                 </PlacesAutocomplete>
             </form>
         );