Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[click/dblClick] Prevent blur when clicking the same element #265

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions __tests__/react/click.js
Expand Up @@ -408,6 +408,15 @@ describe("userEvent.click", () => {
expect(onSubmit).not.toHaveBeenCalled();
});

it("should not fire blur on current element if is the same as previous", () => {
const onBlur = jest.fn();
const { getByText } = render(<button onBlur={onBlur}>Blur</button>);
userEvent.click(getByText("Blur"));
expect(onBlur).not.toHaveBeenCalled();
userEvent.click(getByText("Blur"));
expect(onBlur).not.toHaveBeenCalled();
});

it.each(["input", "textarea"])(
"should not give focus for <%s> when mouseDown is prevented",
(type) => {
Expand Down
9 changes: 9 additions & 0 deletions __tests__/react/dblclick.js
Expand Up @@ -105,6 +105,15 @@ describe("userEvent.dblClick", () => {
]);
});

it("should not fire blur on current element if is the same as previous", () => {
const onBlur = jest.fn();
const { getByText } = render(<button onBlur={onBlur}>Blur</button>);
userEvent.dblClick(getByText("Blur"));
expect(onBlur).not.toHaveBeenCalled();
userEvent.dblClick(getByText("Blur"));
expect(onBlur).not.toHaveBeenCalled();
});

it("should not blur when mousedown prevents default", () => {
let events = [];
const eventsHandler = jest.fn((evt) => events.push(evt.type));
Expand Down
26 changes: 16 additions & 10 deletions src/index.js
Expand Up @@ -44,10 +44,13 @@ function clickBooleanElement(element) {
function clickElement(element, previousElement, init) {
fireEvent.mouseOver(element);
fireEvent.mouseMove(element);
const wasAnotherElementFocused =
previousElement !== element.ownerDocument.body &&
previousElement !== element;
const continueDefaultHandling = fireEvent.mouseDown(element);
if (continueDefaultHandling) {
previousElement && previousElement.blur();
element.focus();
wasAnotherElementFocused && previousElement.blur();
previousElement !== element && element.focus();
}
fireEvent.mouseUp(element);
fireEvent.click(element, init);
Expand All @@ -59,10 +62,13 @@ function clickElement(element, previousElement, init) {
function dblClickElement(element, previousElement) {
fireEvent.mouseOver(element);
fireEvent.mouseMove(element);
const wasAnotherElementFocused =
previousElement !== element.ownerDocument.body &&
previousElement !== element;
const continueDefaultHandling = fireEvent.mouseDown(element);
if (continueDefaultHandling) {
previousElement && previousElement.blur();
element.focus();
wasAnotherElementFocused && previousElement.blur();
previousElement !== element && element.focus();
}
fireEvent.mouseUp(element);
fireEvent.click(element);
Expand Down Expand Up @@ -106,21 +112,21 @@ function fireChangeEvent(event) {
}

const Keys = {
Backspace: { keyCode: 8, code: "Backspace", key: "Backspace" }
Backspace: { keyCode: 8, code: "Backspace", key: "Backspace" },
};

function backspace(element) {
const eventOptions = {
key: Keys.Backspace.key,
keyCode: Keys.Backspace.keyCode,
which: Keys.Backspace.keyCode
which: Keys.Backspace.keyCode,
};
fireEvent.keyDown(element, eventOptions);
fireEvent.keyUp(element, eventOptions);

if (!element.readOnly) {
fireEvent.input(element, {
inputType: "deleteContentBackward"
inputType: "deleteContentBackward",
});
element.value = ""; // when we add special keys to API, will need to respect selected range
}
Expand Down Expand Up @@ -152,7 +158,7 @@ const userEvent = {
break;
}
default:
clickElement(element, wasAnotherElementFocused && focusedElement, init);
clickElement(element, focusedElement, init);
}
},

Expand All @@ -172,7 +178,7 @@ const userEvent = {
break;
}
default:
dblClickElement(element, wasAnotherElementFocused && focusedElement);
dblClickElement(element, focusedElement);
}
},

Expand All @@ -185,7 +191,7 @@ const userEvent = {
fireEvent.mouseLeave(focusedElement);
}

clickElement(element, wasAnotherElementFocused && focusedElement);
clickElement(element, focusedElement);

const valArray = Array.isArray(values) ? values : [values];
const selectedOptions = Array.from(
Expand Down