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

Wrong focus on close findbar #1429

Merged
merged 10 commits into from
Sep 20, 2021

Conversation

matiaslionel
Copy link
Contributor

@matiaslionel matiaslionel commented Sep 20, 2021

image

When the findBar is closed the focus should go back to the find toggle button located on toolbar.

image

Copy link
Collaborator

@jstoffan jstoffan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to add tests for this change, as well.

<button
ref={buttonReference}
className="bp-FindBarToggle"
onClick={(): void => onFindBarToggle(buttonReference.current)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we do the following to avoid the ref?

onClick={({ target }) => onFindBarToggle(target)}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

of course

@@ -410,8 +410,8 @@ class DocBaseViewer extends BaseViewer {
}

handleFindBarClose() {
if (this.docEl) {
this.docEl.focus(); // Prevent focus from transferring to the root document element
if (this.findBarToggleElement) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may also want to check that .focus exists.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok. Updated

const wrapper = getWrapper({ onFindBarToggle: onToggle });

wrapper.simulate('click');
wrapper.simulate('click', mockedEvent);

expect(onToggle).toBeCalled();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we update this to toBeCalledWith and an explicit assertion?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

test updated

@@ -410,8 +410,8 @@ class DocBaseViewer extends BaseViewer {
}

handleFindBarClose() {
if (this.docEl) {
this.docEl.focus(); // Prevent focus from transferring to the root document element
if (this.findBarToggleElement && this.findBarToggleElement.focus) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have a test for this logic?

@@ -1483,7 +1483,8 @@ class DocBaseViewer extends BaseViewer {
this.pinchPage = null;
}

toggleFindBar() {
toggleFindBar(elementToFocus) {
this.findBarToggleElement = elementToFocus;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the convention in this file shortens Element to El. Should we rename to findBarToggleEl?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

renamed

@mergify mergify bot merged commit 8b6aff7 into box:master Sep 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants