fix two interaction issues

mui · Nov 21, 2019 · 58f66b9 · 58f66b9
1 parent 06221ce
commit 58f66b9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 20 deletions.
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
@@ -93,27 +93,14 @@ describe('<Select />', () => {
  // this means the trigger is blurred immediately
  const handleBlur = spy();
  const { getByRole, getAllByRole, queryByRole } = render(
- <Select
- onBlur={handleBlur}
- onMouseDown={event => {
- // simulating certain platforms that focus on mousedown
- if (event.defaultPrevented === false) {
- event.currentTarget.focus();
- }
- }}
- value=""
- >
+ <Select onBlur={handleBlur} value="">
  <MenuItem value="">none</MenuItem>
  <MenuItem value={10}>Ten</MenuItem>
  </Select>,
  );
  const trigger = getByRole('button');
 
- // simulating user click
- act(() => {
- fireEvent.mouseDown(trigger);
- trigger.click();
- });
+ fireEvent.mouseDown(trigger);
 
  expect(handleBlur.callCount).to.equal(0);
  expect(getByRole('listbox')).to.be.ok;
@@ -611,7 +598,6 @@ describe('<Select />', () => {
  const { getByRole, queryByRole } = render(<ControlledWrapper />);
 
  fireEvent.mouseDown(getByRole('button'));
-
  expect(getByRole('listbox')).to.be.ok;
 
  act(() => {
@@ -651,7 +637,6 @@ describe('<Select />', () => {
  stub(button, 'clientWidth').get(() => 14);
 
  fireEvent.mouseDown(button);
-
  expect(getByTestId('paper').style).to.have.property('minWidth', '14px');
  });
 
@@ -665,7 +650,6 @@ describe('<Select />', () => {
  stub(button, 'clientWidth').get(() => 14);
 
  fireEvent.mouseDown(button);
-
  expect(getByTestId('paper').style).to.have.property('minWidth', '');
  });
  });

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -124,6 +124,10 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
  };
 
  const handleMouseDown = event => {
+ // Hijack the default focus behavior.
+ event.preventDefault();
+ displayNode.focus();
+
  update(true, event);
  };
 

diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js
@@ -58,7 +58,6 @@ describe('<Select> integration', () => {
  const trigger = getByRole('button');
  // Let's open the select component
  // in the browser user click also focuses
- trigger.focus();
  fireEvent.mouseDown(trigger);
 
  const options = getAllByRole('option');
@@ -81,7 +80,6 @@ describe('<Select> integration', () => {
  expect(trigger).to.have.text('Ten');
  // Let's open the select component
  // in the browser user click also focuses
- trigger.focus();
  fireEvent.mouseDown(trigger);
 
  const options = getAllByRole('option');