fix(Geosuggest): fix input id and label for (#491)

* fix(Geosuggest): fix input id and label for * revert example * Update src/Geosuggest.tsx Co-authored-by: Leslie Lawendel <[email protected]> * revert test changes * adapt test * adapt test * add pr comments * Update src/input.tsx Co-authored-by: Leslie Lawendel <[email protected]> --------- Co-authored-by: Leslie Lawendel <[email protected]>
ubilabs · Jan 25, 2024 · 267b4ac · 267b4ac
1 parent 527b3ae
commit 267b4ac
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/src/Geosuggest.tsx b/src/Geosuggest.tsx
@@ -660,7 +660,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
@@ -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>
         )}

diff --git 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', () => {