From 267b4ac4a200391d7cf295a1a5868d6b58fc9b85 Mon Sep 17 00:00:00 2001
From: Joao Garin <joao.garin@gmail.com>
Date: Thu, 25 Jan 2024 13:46:08 +0000
Subject: [PATCH] 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 <plumdumpling@users.noreply.github.com>

* revert test changes

* adapt test

* adapt test

* add pr comments

* Update src/input.tsx

Co-authored-by: Leslie Lawendel <plumdumpling@users.noreply.github.com>

---------

Co-authored-by: Leslie Lawendel <plumdumpling@users.noreply.github.com>
---
 src/Geosuggest.tsx       |  4 +++-
 src/input.tsx            |  6 +++++-
 test/Geosuggest_spec.tsx | 19 +++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/Geosuggest.tsx b/src/Geosuggest.tsx
index 394d587..c29578d 100644
--- 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
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>
         )}
diff --git a/test/Geosuggest_spec.tsx b/test/Geosuggest_spec.tsx
index c8d0dc4..addbc62 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', () => {