Skip to content

Commit

Permalink
Merge pull request #12 from chandlerprall/274-super-select-pr-feedback
Browse files Browse the repository at this point in the history 
274 super select pr feedback
  • Loading branch information
@cchaos
cchaos authored Aug 14, 2018
2 parents a001055 + 5e86527 commit 249fa1a
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 153 deletions.
4 changes: 4 additions & 0 deletions src-docs/src/views/super_select/super_select_basic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export default class extends Component {
Warning
</EuiHealth>
),
'data-test-subj': 'option-warning',
disabled: true,
},
{
value: 'minor',
Expand All @@ -27,6 +29,7 @@ export default class extends Component {
Minor
</EuiHealth>
),
'data-test-subj': 'option-minor',
},
{
value: 'critical',
Expand All @@ -35,6 +38,7 @@ export default class extends Component {
Critical
</EuiHealth>
),
'data-test-subj': 'option-critical',
},
];

Expand Down
70 changes: 19 additions & 51 deletions src/components/form/super_select/__snapshots__/super_select.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ exports[`EuiSuperSelect is rendered 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
aria-label="aria-label"
class="euiSuperSelectControl__hiddenField"
data-test-subj="test subject string"
<input
type="hidden"
value=""
/>
<div
class="euiFormControlLayout"
Expand Down Expand Up @@ -76,17 +74,10 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value=""
/>
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -148,18 +139,10 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
selected=""
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value="1"
/>
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -223,17 +206,10 @@ exports[`EuiSuperSelect props options are rendered 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value=""
/>
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -295,18 +271,10 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
<div
class="euiPopover__anchor"
>
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
selected=""
value="1"
/>
<option
value="2"
/>
</select>
<input
type="hidden"
value="1"
/>
<div
class="euiFormControlLayout"
>
Expand Down
72 changes: 24 additions & 48 deletions src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@

exports[`EuiSuperSelectControl is rendered 1`] = `
Array [
<select
aria-hidden="true"
aria-label="aria-label"
class="euiSuperSelectControl__hiddenField"
data-test-subj="test subject string"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
Expand Down Expand Up @@ -65,9 +63,9 @@ Array [

exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
Expand Down Expand Up @@ -124,17 +122,10 @@ Array [

exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>,
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -190,9 +181,9 @@ Array [

exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
Expand Down Expand Up @@ -249,9 +240,9 @@ Array [

exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
Expand Down Expand Up @@ -311,17 +302,10 @@ Array [

exports[`EuiSuperSelectControl props options are rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
value="1"
/>
<option
value="2"
/>
</select>,
<input
type="hidden"
value=""
/>,
<div
class="euiFormControlLayout"
>
Expand Down Expand Up @@ -377,18 +361,10 @@ Array [

exports[`EuiSuperSelectControl props value option is rendered 1`] = `
Array [
<select
aria-hidden="true"
class="euiSuperSelectControl__hiddenField"
>
<option
selected=""
value="1"
/>
<option
value="2"
/>
</select>,
<input
type="hidden"
value="1"
/>,
<div
class="euiFormControlLayout"
>
Expand Down
6 changes: 0 additions & 6 deletions src/components/form/super_select/_super_select_control.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,3 @@
@include euiFormControlFocusStyle;
}
}

.euiSuperSelectControl__hiddenField {
// This should be completely hidden even from screen readers,
// it's meant only to allow submission of a form.
display: none;
}
42 changes: 25 additions & 17 deletions src/components/form/super_select/super_select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,23 +87,31 @@ export class EuiSuperSelect extends Component {
}

onItemKeyDown = e => {
if (e.keyCode === keyCodes.ESCAPE) {
// close the popover and prevent ancestors from handling
e.preventDefault();
e.stopPropagation();
this.closePopover();
} else if (e.keyCode === keyCodes.TAB) {
// no-op
e.preventDefault();
e.stopPropagation();
} else if (e.keyCode === keyCodes.UP) {
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_BACK);
} else if (e.keyCode === keyCodes.DOWN) {
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_FORWARD);
switch (e.keyCode) {
case keyCodes.ESCAPE:
// close the popover and prevent ancestors from handling
e.preventDefault();
e.stopPropagation();
this.closePopover();
break;

case keyCodes.TAB:
// no-op
e.preventDefault();
e.stopPropagation();
break;

case keyCodes.UP:
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_BACK);
break;

case keyCodes.DOWN:
e.preventDefault();
e.stopPropagation();
this.shiftFocus(SHIFT_FORWARD);
break;
}
}

Expand Down
34 changes: 3 additions & 31 deletions src/components/form/super_select/super_select_control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,8 @@ export const EuiSuperSelectControl = ({
options,
id,
name,
inputRef,
fullWidth,
isLoading,
hasNoInitialSelection,
defaultValue,
compressed,
value,
Expand All @@ -32,13 +30,6 @@ export const EuiSuperSelectControl = ({
className
);

let emptyOptionNode;
if (hasNoInitialSelection) {
emptyOptionNode = (
<option value="" disabled hidden style={{ display: 'none' }}>&nbsp;</option>
);
}

// React HTML input can not have both value and defaultValue properties.
// https://reactjs.org/docs/uncontrolled-components.html#default-values
let selectDefaultValue;
Expand All @@ -61,25 +52,13 @@ export const EuiSuperSelectControl = ({

return (
<Fragment>
<select
<input
type="hidden"
id={id}
name={name}
className="euiSuperSelectControl__hiddenField"
ref={inputRef}
defaultValue={selectDefaultValue}
value={value}
aria-hidden="true"
{...rest}
>
{emptyOptionNode}
{options.map((option, index) => {
const {
text, // eslint-disable-line no-unused-vars
value,
} = option;
return <option value={value} key={index} />;
})}
</select>
/>

<EuiFormControlLayout
icon={icon}
Expand Down Expand Up @@ -124,12 +103,6 @@ EuiSuperSelectControl.propTypes = {
isInvalid: PropTypes.bool,
fullWidth: PropTypes.bool,
isLoading: PropTypes.bool,

/**
* Simulates no selection by creating an empty, selected, hidden first option
*/
hasNoInitialSelection: PropTypes.bool,
inputRef: PropTypes.func,
/**
* when `true` creates a shorter height input
*/
Expand All @@ -140,6 +113,5 @@ EuiSuperSelectControl.defaultProps = {
options: [],
fullWidth: false,
isLoading: false,
hasNoInitialSelection: false,
compressed: false,
};

0 comments on commit 249fa1a

Please sign in to comment.