add default id to checkbox and datepicker

fixes #248
digipolisantwerp · Aug 12, 2021 · 9df3e08 · 9df3e08
1 parent 070ca5e
commit 9df3e08
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+### Fixed
+
+- Checkbox no longer becomes disabled when no id is given (fixes [#248](https://github.com/digipolisantwerp/antwerp-ui_react/issues/248))
+- Datepicker label selects datepicker when no id is given
 
 ## v6.0.2 - 2021-06-08
 

diff --git a/packages/form/src/Checkbox/Checkbox.js b/packages/form/src/Checkbox/Checkbox.js
@@ -22,6 +22,8 @@ class Checkbox extends Component<Props> {
     }
   }
 
+  defaultId = 'aui-cb-' + Math.random().toString(36);
+
   render() {
     const {
       id,
@@ -43,15 +45,15 @@ class Checkbox extends Component<Props> {
         <div className="a-input__checkbox">
           <input
             type="checkbox"
-            id={id}
+            id={id || this.defaultId}
             name={name}
             onChange={this.handleChange}
             aria-checked={this.props.checked}
             checked={this.props.checked}
             disabled={disabled}
             {...this.props.handler}
             />
-          <InputLabel htmlFor={id}>{label}{requiredLabel}</InputLabel>
+          <InputLabel htmlFor={id || this.defaultId}>{label}{requiredLabel}</InputLabel>
         </div>
       </div>
     )

diff --git a/packages/form/src/Datepicker/Datepicker.js b/packages/form/src/Datepicker/Datepicker.js
@@ -84,6 +84,8 @@ class Datepicker extends Component<Props> {
     disabled: false,
   };
 
+  defaultId = 'aui-date-' + Math.random().toString(36);
+
   componentDidMount() {
     if (typeof window !== 'undefined') {
       document.addEventListener('mousedown', this.handleClickOutside.bind(this));
@@ -226,12 +228,12 @@ class Datepicker extends Component<Props> {
     );
 
     return <div className={datepickerWrapperClass} ref={node => this.datepicker = node} data-qa={qa}>
-      {label && <InputLabel htmlFor={id}>{label}</InputLabel>}
+      {label && <InputLabel htmlFor={id || this.defaultId}>{label}</InputLabel>}
       <div className="a-input__wrapper">
         <TextField
           mask={mask}
           name={name}
-          id={id}
+          id={id || this.defaultId}
           value={input}
           required={required}
           readOnly={readOnly}