Repository: ubilabs/react-geosuggest (TypeScript)

Issue:
Label "for" and input "id" do not match
### Short description

I was trying to add a label that points correctly to the id of the input.

In this issue https://github.com/ubilabs/react-geosuggest/issues/450 there is a mention to this PR https://github.com/ubilabs/react-geosuggest/pull/464 which implements a id to the input, however the "for" attribute of the label points to the id prop directly and the input has a id of `geosuggest__input--${id}` https://github.com/ubilabs/react-geosuggest/pull/464/files#diff-c4990fe56ebfd0fcaf879109aa33c1a0002f567e3273ec7255e94934331cbbd6R169 which basically now has the label pointing to the div that wraps the entire autocomplete instead of pointing to the input itself.

### Expected results

I expected that by providing an id and a label the label points to the input and not the div above.

### Actual results

Instead of '...', what I saw was that '...' happened instead.

<!-- if reporting a bug -->
### Reproduction steps

1. Provide a id and a label
2. Check the label for and id of the input and they don't match 

### Additional Information

This poses an accessibility problem which basically right now its very hard to solve as we don't have access to the internals. the only way is to add the label ourselves.. Also the documentation is wrong here https://github.com/ubilabs/react-geosuggest#label since this is not what happens currently



Discussion:

Patch:
diff --git a/src/Geosuggest.tsx b/src/Geosuggest.tsx
index 417643c..48ee193 100644
--- a/src/Geosuggest.tsx
+++ b/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>
diff --git a/src/input.tsx b/src/input.tsx
index c0c9138..176136e 100644
--- a/src/input.tsx
+++ b/src/input.tsx
@@ -163,7 +163,11 @@ export default class Input extends React.PureComponent<Props, unknown> {
     return (
       <>
         {shouldRenderLabel && (
-          <label className="geosuggest__label" htmlFor={this.props.id}>
+          <label
+            className="geosuggest__label"
+            htmlFor={`geosuggest__input${
+              this.props.id ? `--${this.props.id}` : ''
+            }`}>
             {this.props.label}
           </label>
         )}


Test patch:
diff --git a/test/Geosuggest_spec.tsx b/test/Geosuggest_spec.tsx
index 65fc1c4..99f5e42 100644
--- a/test/Geosuggest_spec.tsx
+++ b/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.getAttribute('for')).to.be.equal(input.getAttribute('id'));
+    });
   });
 
   describe('without label and id props', () => {