fix(Select): remove form typeahead and checkbox selects (#3298)

patternfly · Nov 14, 2019 · 913daeb · 913daeb
1 parent 093458b
commit 913daeb
Show file tree

Hide file tree

Showing 3 changed files with 1,638 additions and 1,814 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.tsx b/packages/patternfly-4/react-core/src/components/Select/Select.tsx
@@ -432,26 +432,24 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
               <React.Fragment>
                 <div className={css(styles.selectToggleWrapper)}>
                   {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                  <form onSubmit={e => e.preventDefault()}>
-                    <input
-                      className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                      aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                      id="select-typeahead"
-                      aria-label={ariaLabelTypeAhead}
-                      placeholder={placeholderText as string}
-                      value={
-                        typeaheadInputValue !== null
-                          ? typeaheadInputValue
-                          : this.getDisplay(selections as string, 'text') || ''
-                      }
-                      type="text"
-                      onClick={this.onClick}
-                      onChange={this.onChange}
-                      onFocus={this.handleFocus}
-                      autoComplete="off"
-                      disabled={isDisabled}
-                    />
-                  </form>
+                  <input
+                    className={css(formStyles.formControl, styles.selectToggleTypeahead)}
+                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                    id="select-typeahead"
+                    aria-label={ariaLabelTypeAhead}
+                    placeholder={placeholderText as string}
+                    value={
+                      typeaheadInputValue !== null
+                        ? typeaheadInputValue
+                        : this.getDisplay(selections as string, 'text') || ''
+                    }
+                    type="text"
+                    onClick={this.onClick}
+                    onChange={this.onChange}
+                    onFocus={this.handleFocus}
+                    autoComplete="off"
+                    disabled={isDisabled}
+                  />
                 </div>
                 {selections && (
                   <button
@@ -474,22 +472,20 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
                 <div className={css(styles.selectToggleWrapper)}>
                   {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
                   {selections && (Array.isArray(selections) && selections.length > 0) && selectedChips}
-                  <form onSubmit={e => e.preventDefault()}>
-                    <input
-                      className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                      aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                      id="select-multi-typeahead-typeahead"
-                      aria-label={ariaLabelTypeAhead}
-                      placeholder={placeholderText as string}
-                      value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                      type="text"
-                      onChange={this.onChange}
-                      onClick={this.onClick}
-                      onFocus={this.handleFocus}
-                      autoComplete="off"
-                      disabled={isDisabled}
-                    />
-                  </form>
+                  <input
+                    className={css(formStyles.formControl, styles.selectToggleTypeahead)}
+                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                    id="select-multi-typeahead-typeahead"
+                    aria-label={ariaLabelTypeAhead}
+                    placeholder={placeholderText as string}
+                    value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
+                    type="text"
+                    onChange={this.onChange}
+                    onClick={this.onClick}
+                    onFocus={this.handleFocus}
+                    autoComplete="off"
+                    disabled={isDisabled}
+                  />
                 </div>
                 {selections && (Array.isArray(selections) && selections.length > 0) && (
                   <button

diff --git a/packages/patternfly-4/react-core/src/components/Select/SelectMenu.tsx b/packages/patternfly-4/react-core/src/components/Select/SelectMenu.tsx
@@ -79,16 +79,15 @@ export class SelectMenu extends React.Component<SelectMenuProps> {
     });
   }
 
-  extendCheckboxChildren(props: any) {
+  extendCheckboxChildren() {
     const { children, isGrouped, checked, sendRef, keyHandler } = this.props;
-    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
     if (isGrouped) {
       let index = 0;
       return React.Children.map(children, (group: React.ReactElement) =>
         React.cloneElement(group, {
           titleId: group.props.label.replace(/\W/g, '-'),
           children: (
-            <fieldset aria-labelledby={group.props.label.replace(/\W/g, '-')} className={css(formStyles.formFieldset)}>
+            <fieldset aria-labelledby={group.props.label.replace(/\W/g, '-')} className={css(styles.selectMenuFieldset)}>
               {group.props.children.map((option: React.ReactElement) =>
                 React.cloneElement(option, {
                   isChecked: checked && checked.includes(option.props.value),
@@ -103,12 +102,7 @@ export class SelectMenu extends React.Component<SelectMenuProps> {
       );
     }
     return (
-      <fieldset
-        {...props}
-        aria-label={ariaLabel}
-        aria-labelledby={(!ariaLabel && ariaLabelledBy) || null}
-        className={css(formStyles.formFieldset)}
-      >
+      <React.Fragment>
         {React.Children.map(children, (child: React.ReactElement, index: number) =>
           React.cloneElement(child, {
             isChecked: checked && checked.includes(child.props.value),
@@ -117,7 +111,7 @@ export class SelectMenu extends React.Component<SelectMenuProps> {
             index
           })
         )}
-      </fieldset>
+      </React.Fragment>
     );
   }
 
@@ -135,8 +129,11 @@ export class SelectMenu extends React.Component<SelectMenuProps> {
       maxHeight,
       noResultsFoundText,
       createText,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
       ...props
     } = this.props;
+    const {  } = props;
 
     return (
       <SelectConsumer>
@@ -158,9 +155,14 @@ export class SelectMenu extends React.Component<SelectMenuProps> {
                   className={css(styles.selectMenu, className)}
                   {...(maxHeight && { style: { maxHeight, overflow: 'auto' } })}
                 >
-                  <form noValidate className={css(formStyles.form)}>
-                    <div className={css(formStyles.formGroup)}>{this.extendCheckboxChildren(props)}</div>
-                  </form>
+                  <fieldset
+                    {...props}
+                    aria-label={ariaLabel}
+                    aria-labelledby={(!ariaLabel && ariaLabelledBy) || null}
+                    className={css(formStyles.formFieldset)}
+                  >
+                    {this.extendCheckboxChildren()}
+                  </fieldset>
                 </div>
               </FocusTrap>
             )}
@@ -169,9 +171,7 @@ export class SelectMenu extends React.Component<SelectMenuProps> {
                 className={css(styles.selectMenu, className)}
                 {...(maxHeight && { style: { maxHeight, overflow: 'auto' } })}
               >
-                <form noValidate className={css(formStyles.form)}>
-                  <div className={css(formStyles.formGroup)} />
-                </form>
+                <fieldset className={css(styles.selectMenuFieldset)}/>
               </div>
             )}
           </React.Fragment>