Comments (9)
As long as I am not aware of the problem - I'll handle it and fix soon. Like tomorrow should be ok-ish.
Thank you for letting me know
from react-focus-on.
Have you tried enabled
prop? Look like it's almost working, but there is some problem with returnFocus
(not working)
https://codesandbox.io/s/react-focus-on-react-spring-5m3uv
from react-focus-on.
Yeah tried with that but not returning focus is a deal breaker, you also get a Can't perform a React state update on an unmounted component.
warning from react
from react-focus-on.
3.1.4
should fix it
from react-focus-on.
Awesome, thanks! 👍
A minor nitpick would be that the dialog content jumps little when closing it. I guess it's because the scroll-lock is removed before the element has fully unmounted. Would it be possible to solve this somehow too? This is not a deal breaker though, just a nice to have
from react-focus-on.
That's interesting. And easy doable. However, I could not propose any other syntax except additional prop to override scrollLock
settings. Right now there is only one to disable it, not forcible enable...
<FocusOn
enabled={controlsFocusLockAndScrollLock}
forceScrollLock={controlsScrollLock}
>
from react-focus-on.
Thought a bit more about this and I don't think the scroll should be locked while the dialog is closing. So immediately when you close you should be able to scroll (like it's currently) but the scrollbar style applied to the dialog needs to stay until it's unmounted to avoid the jump. This will probably be messier to implement but will provide a better user-experience.
Do we still need the additional prop in this case? I think we should be able to just go with the enabled
prop still
from react-focus-on.
Right now you can:
- set
focusLock
prop to false, this would disable focus lock, keeping scroll lock active - set
enabled
to false after animation end.
That would solve your problem.
However, I could not unlock scroll and keep scrollbar hidden. The hidden scrollbar would keep scrolling disabled. However, you might mitigate the "jump" applying an extra classname to your Modal - https://github.com/theKashey/react-focus-on#exposed-from-react-remove-scroll, like you need the first one (classNames.fullWidth)
from react-focus-on.
Alright, adding the classname got me the closest to what I want, however I wasn't able to get the gapMode
to use padding instead of margin. Maybe because the overlay is the parent of the FocusOn? I've updated the codesandbox with the changes. Last thing from this being the perfect solution 😄
from react-focus-on.
Related Issues (20)
- Allow `style` prop on <FocusOn /> HOT 1
- Use with react-transition-group doesn't clear aria-hidden attributes HOT 2
- Scroll lock prevents multi-touch zoom and back functionality HOT 6
- React-focus-lock dependency HOT 2
- Update aria-hidden to v. 1.1.3 to fix an IE11 incompatibility issue HOT 1
- Can't resolve tslib HOT 1
- Console error [Intervention] HOT 1
- Shadow DOM HOT 5
- How to preventDefault? HOT 4
- Heading, paragraph text are not selectable inside `FocusOn` HOT 3
- React@17 event delegation issue HOT 7
- Support passing `focusOptions` to `react-focus-lock`
- Upgrade react-focus-lock to 2.9.4 HOT 1
- `gapMode` prop/API is not actually used HOT 7
- "React does not recognize the `gapMode` prop on a DOM element" warning HOT 3
- Missing Prop `noFocusGuards` HOT 6
- iOS: keyboard popping up on input focus scrolls locked body HOT 3
- Bumping react-focus-lock to 2.9.4
- Adding support for `react-focus-lock` `crossFrame` prop HOT 2
- Prevent focus removal for external resources HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-focus-on.