fix(Geosuggest): fix input id and label for

src/Geosuggest.tsx

@@ -658,7 +658,9 @@ export default class GeoSuggest extends React.Component<Props, State> {
     );
 
     return (
-      <div className={classes} id={this.props.id}>
+      <div
+        className={classes}
+        id={`geosuggest__wrapper${this.props.id ? `--${this.props.id}` : ''}`}>
         <div className="geosuggest__input-wrapper">{input}</div>
         <div className="geosuggest__suggests-wrapper">{suggestionsList}</div>
       </div>

src/input.tsx

@@ -163,13 +163,16 @@ export default class Input extends React.PureComponent<Props, unknown> {
     return (
       <>
         {shouldRenderLabel && (
-          <label className="geosuggest__label" htmlFor={this.props.id}>
+          <label
+            className="geosuggest__label"
+            htmlFor={this.props.id ? this.props.id : 'geosuggest__input'}
+          >
             {this.props.label}
           </label>
         )}
         <input
           className={classes}
-          id={`geosuggest__input${this.props.id ? `--${this.props.id}` : ''}`}
+          id={this.props.id ? this.props.id : 'geosuggest__input'}
           ref={(i): HTMLInputElement | null => (this.input = i)}
           type={this.props.inputType}
           {...attributes}

test/Geosuggest_spec.tsx

@@ -642,6 +642,25 @@ describe('Component: Geosuggest', () => {
 
       expect(label).to.not.be.null;
     });
+
+    it('should render a <label> pointing to the input if `label` and `id` props were supplied', () => {
+      const props = {
+        id: 'geosuggest-id',
+        label: 'some label'
+      };
+
+      renderGeosuggest(props);
+
+      const label = component.container.querySelector(
+        'label'
+      ) as HTMLLabelElement;
+
+      const input = component.container.querySelector(
+        'input'
+      ) as HTMLInputElement;
+
+      expect(label).to.be.equal(input);
+    });
   });
 
   describe('without label and id props', () => {