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

Allow for changing focus in lifecycle hooks #1988

Merged
merged 2 commits into from Oct 14, 2017

Conversation

Projects
None yet
4 participants
@purplecode
Copy link
Contributor

purplecode commented Oct 12, 2017

Changing focus on element creation and update is currently no possible even if intended. The original activeElement is restored after rendering, because of some issues with rendering in IE according to the comments: https://github.com/MithrilJS/mithril.js/blob/next/render/render.js#L668-L669

Motivation and Context

There is a valid use case for changing the behavior. Let's assume we have a modal (might come from 3rd party library) that sets the focus to inner input when shown. When closed it resets the focus to original active element.

function openModal(node) {
     renderModal(node);
     previousActiveElement = document.activeElement;
     input.focus();
}

function closeModal() {
     previousActiveElement.focus();
}

const modal = () => 
 <Modal oncreate={({dom}) => openModal(dom)}>
   <Input id="input"/>
 </Modal>

render(root, modal()); // focus should be set to input inside modal

My change is not including remove callbacks. Focus can be set only in init, create and update hooks. Fixing it would require much deeper changes. If you agree with the approach I could follow up on it and made another PR. If not, it would make sense at least to include a warning in documentation.

How Has This Been Tested?

Unit test + application code.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have updated docs/change-log.md

@purplecode purplecode requested a review from isiahmeadows as a code owner Oct 12, 2017

@pygy pygy self-requested a review Oct 13, 2017

@pygy

pygy approved these changes Oct 13, 2017

Copy link
Member

pygy left a comment

Thanks for this, setTimeout(() => vnode.dom.focus()), begone!

I've been affected by the problem and I've read that code countless times, yet I hadn't connected the dots...

LGTM if you add a change log entry.

@purplecode purplecode requested a review from tivac as a code owner Oct 13, 2017

@purplecode

This comment has been minimized.

Copy link
Contributor

purplecode commented Oct 13, 2017

change-log.md updated

@pygy

This comment has been minimized.

Copy link
Member

pygy commented Oct 13, 2017

Many thanks :-)

Now we need the input of either @isiahmeadows, @tivac or @lhorie :-)

@tivac

This comment has been minimized.

Copy link
Member

tivac commented Oct 14, 2017

I'd trust @pygy's code review more than mine, but I'm happy to 👍 this. Thanks so much @purplecode!

@tivac

tivac approved these changes Oct 14, 2017

@tivac tivac merged commit 8b56c70 into MithrilJS:next Oct 14, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

pygy added a commit that referenced this pull request Nov 29, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment