Escaped id attributes (fixes #671).

vazco · Dec 18, 2019 · 6a30de6 · 6a30de6
1 parent 81c554f
commit 6a30de6
Show file tree

Hide file tree

Showing 18 changed files with 93 additions and 36 deletions.
diff --git a/packages/uniforms-bootstrap3/__tests__/RadioField.tsx b/packages/uniforms-bootstrap3/__tests__/RadioField.tsx
@@ -82,13 +82,13 @@ test('<RadioField> - renders a set of checkboxes with correct id (specified)', (
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<RadioField> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-bootstrap3/__tests__/SelectField.tsx b/packages/uniforms-bootstrap3/__tests__/SelectField.tsx
@@ -336,13 +336,13 @@ test('<SelectField checkboxes> - renders a set of checkboxes with correct id (sp
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<SelectField checkboxes> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-bootstrap3/src/RadioField.tsx b/packages/uniforms-bootstrap3/src/RadioField.tsx
@@ -4,6 +4,12 @@ import { connectField } from 'uniforms';
 
 import wrapField from './wrapField';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const Radio = props =>
   wrapField(
     props,
@@ -15,11 +21,11 @@ const Radio = props =>
           `radio${props.inline ? '-inline' : ''}`,
         )}
       >
-        <label htmlFor={`${props.id}-${item}`}>
+        <label htmlFor={`${props.id}-${escape(item)}`}>
           <input
             checked={item === props.value}
             disabled={props.disabled}
-            id={`${props.id}-${item}`}
+            id={`${props.id}-${escape(item)}`}
             name={props.name}
             onChange={() => props.onChange(item)}
             type="radio"

diff --git a/packages/uniforms-bootstrap3/src/SelectField.tsx b/packages/uniforms-bootstrap3/src/SelectField.tsx
@@ -4,6 +4,12 @@ import { connectField } from 'uniforms';
 
 import wrapField from './wrapField';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const xor = (item, array) => {
   const index = array.indexOf(item);
   if (index === -1) {
@@ -22,15 +28,15 @@ const renderCheckboxes = props =>
         `checkbox${props.inline ? '-inline' : ''}`,
       )}
     >
-      <label htmlFor={`${props.id}-${item}`}>
+      <label htmlFor={`${props.id}-${escape(item)}`}>
         <input
           checked={
             props.fieldType === Array
               ? props.value.includes(item)
               : props.value === item
           }
           disabled={props.disabled}
-          id={`${props.id}-${item}`}
+          id={`${props.id}-${escape(item)}`}
           name={props.name}
           onChange={() =>
             props.onChange(

diff --git a/packages/uniforms-bootstrap4/__tests__/RadioField.tsx b/packages/uniforms-bootstrap4/__tests__/RadioField.tsx
@@ -83,13 +83,13 @@ test('<RadioField> - renders a set of checkboxes with correct id (specified)', (
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<RadioField> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-bootstrap4/__tests__/SelectField.tsx b/packages/uniforms-bootstrap4/__tests__/SelectField.tsx
@@ -336,13 +336,13 @@ test('<SelectField checkboxes> - renders a set of checkboxes with correct id (sp
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<SelectField checkboxes> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-bootstrap4/src/RadioField.tsx b/packages/uniforms-bootstrap4/src/RadioField.tsx
@@ -4,6 +4,12 @@ import { connectField } from 'uniforms';
 
 import wrapField from './wrapField';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const Radio = props =>
   wrapField(
     props,
@@ -15,12 +21,15 @@ const Radio = props =>
           'custom-control-inline': props.inline,
         })}
       >
-        <label htmlFor={`${props.id}-${item}`} className="form-check-label">
+        <label
+          htmlFor={`${props.id}-${escape(item)}`}
+          className="form-check-label"
+        >
           <input
             checked={item === props.value}
             className="form-check-input"
             disabled={props.disabled}
-            id={`${props.id}-${item}`}
+            id={`${props.id}-${escape(item)}`}
             name={props.name}
             onChange={() => props.onChange(item)}
             type="radio"

diff --git a/packages/uniforms-bootstrap4/src/SelectField.tsx b/packages/uniforms-bootstrap4/src/SelectField.tsx
@@ -4,6 +4,12 @@ import { connectField } from 'uniforms';
 
 import wrapField from './wrapField';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const xor = (item, array) => {
   const index = array.indexOf(item);
   if (index === -1) {
@@ -22,15 +28,15 @@ const renderCheckboxes = props =>
         `checkbox${props.inline ? '-inline' : ''}`,
       )}
     >
-      <label htmlFor={`${props.id}-${item}`}>
+      <label htmlFor={`${props.id}-${escape(item)}`}>
         <input
           checked={
             props.fieldType === Array
               ? props.value.includes(item)
               : props.value === item
           }
           disabled={props.disabled}
-          id={`${props.id}-${item}`}
+          id={`${props.id}-${escape(item)}`}
           name={props.name}
           onChange={() =>
             props.onChange(

diff --git a/packages/uniforms-material/__tests__/SelectField.tsx b/packages/uniforms-material/__tests__/SelectField.tsx
@@ -334,13 +334,13 @@ test('<SelectField checkboxes> - renders a set of Radio buttons with correct id
       .find(Radio)
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find(Radio)
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<SelectField checkboxes> - renders a set of Radio buttons with correct name', () => {

diff --git a/packages/uniforms-material/src/SelectField.tsx b/packages/uniforms-material/src/SelectField.tsx
@@ -12,6 +12,12 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import wrapField from './wrapField';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const xor = (item, array) => {
   const index = array.indexOf(item);
   if (index === -1) {
@@ -126,7 +132,7 @@ const renderCheckboxes = ({
       >
         {allowedValues.map(item => (
           <FormControlLabel
-            control={<Radio id={`${id}-${item}`} {...filteredProps} />}
+            control={<Radio id={`${id}-${escape(item)}`} {...filteredProps} />}
             key={item}
             label={transform ? transform(item) : item}
             value={item}
@@ -144,7 +150,7 @@ const renderCheckboxes = ({
             control={
               <SelectionControl
                 checked={value.includes(item)}
-                id={`${id}-${item}`}
+                id={`${id}-${escape(item)}`}
                 name={name}
                 onChange={() => disabled || onChange(xor(item, value))}
                 ref={inputRef}

diff --git a/packages/uniforms-semantic/__tests__/RadioField.tsx b/packages/uniforms-semantic/__tests__/RadioField.tsx
@@ -71,13 +71,13 @@ test('<RadioField> - renders a set of checkboxes with correct id (specified)', (
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<RadioField> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-semantic/__tests__/SelectField.tsx b/packages/uniforms-semantic/__tests__/SelectField.tsx
@@ -325,13 +325,13 @@ test('<SelectField checkboxes> - renders a set of checkboxes with correct id (sp
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<SelectField checkboxes> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-semantic/src/RadioField.tsx b/packages/uniforms-semantic/src/RadioField.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 import classnames from 'classnames';
 import { connectField, filterDOMProps } from 'uniforms';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const Radio = ({
   allowedValues,
   checkboxes, // eslint-disable-line no-unused-vars
@@ -35,13 +41,13 @@ const Radio = ({
           <input
             checked={item === value}
             disabled={disabled}
-            id={`${id}-${item}`}
+            id={`${id}-${escape(item)}`}
             name={name}
             onChange={() => onChange(item)}
             type="radio"
           />
 
-          <label htmlFor={`${id}-${item}`}>
+          <label htmlFor={`${id}-${escape(item)}`}>
             {transform ? transform(item) : item}
           </label>
         </div>

diff --git a/packages/uniforms-semantic/src/SelectField.tsx b/packages/uniforms-semantic/src/SelectField.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 import classnames from 'classnames';
 import { connectField, filterDOMProps } from 'uniforms';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const xor = (item, array) => {
   const index = array.indexOf(item);
   if (index === -1) {
@@ -27,15 +33,15 @@ const renderCheckboxes = ({
         <input
           checked={fieldType === Array ? value.includes(item) : value === item}
           disabled={disabled}
-          id={`${id}-${item}`}
+          id={`${id}-${escape(item)}`}
           name={name}
           onChange={() =>
             onChange(fieldType === Array ? xor(item, value) : item)
           }
           type="checkbox"
         />
 
-        <label htmlFor={`${id}-${item}`}>
+        <label htmlFor={`${id}-${escape(item)}`}>
           {transform ? transform(item) : item}
         </label>
       </div>

diff --git a/packages/uniforms-unstyled/__tests__/RadioField.tsx b/packages/uniforms-unstyled/__tests__/RadioField.tsx
@@ -71,13 +71,13 @@ test('<RadioField> - renders a set of checkboxes with correct id (specified)', (
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<RadioField> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-unstyled/__tests__/SelectField.tsx b/packages/uniforms-unstyled/__tests__/SelectField.tsx
@@ -325,13 +325,13 @@ test('<SelectField checkboxes> - renders a set of checkboxes with correct id (sp
       .find('input')
       .at(0)
       .prop('id'),
-  ).toBe('y-a');
+  ).toBe('y-YQ');
   expect(
     wrapper
       .find('input')
       .at(1)
       .prop('id'),
-  ).toBe('y-b');
+  ).toBe('y-Yg');
 });
 
 test('<SelectField checkboxes> - renders a set of checkboxes with correct name', () => {

diff --git a/packages/uniforms-unstyled/src/RadioField.tsx b/packages/uniforms-unstyled/src/RadioField.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { connectField, filterDOMProps } from 'uniforms';
 
+const base64 =
+  typeof btoa !== 'undefined'
+    ? btoa
+    : (x: string) => Buffer.from(x).toString('base64');
+const escape = (x: string) => base64(x).replace(/=+$/, '');
+
 const Radio = ({
   allowedValues,
   checkboxes, // eslint-disable-line no-unused-vars
@@ -21,13 +27,13 @@ const Radio = ({
         <input
           checked={item === value}
           disabled={disabled}
-          id={`${id}-${item}`}
+          id={`${id}-${escape(item)}`}
           name={name}
           onChange={() => onChange(item)}
           type="radio"
         />
 
-        <label htmlFor={`${id}-${item}`}>
+        <label htmlFor={`${id}-${escape(item)}`}>
           {transform ? transform(item) : item}
         </label>
       </div>