Bug: Suggestions container doesn't render over (popover) elements #14
Labels
Comments
Giners
added a commit
that referenced
this issue
Jan 10, 2018
This commit changes the behavior of how we render our suggestions container. In the past I naively believed that when our suggestions container was rendered it would magically "hide" elements that came after it. As I'm learning this isn't the case. As a result of my inexperience the suggestions container would "blend" with elements of the same "depth". This is all documented in bug #14. We now render the suggestions container over a target provided to us. We now get the desired behavior where the suggestions container renders over elements and properly receives all of the focus/events. While fixing how we rendered the suggestions container though I took a big departure from how I was doing things in the past. In the past I used the 'react-autosuggest' to provide autocomplete functionality to our component. When trying to use it to properly render our suggestions container (i.e. render over/popover a target) I found it increasingly difficult to work with. As a result I looked for other solutions and decided to use 'downshift'. 'downshift' was a lot easier to work with and "did more" for me out of the box. I want to make clear for anyone who may read this in the future that the 'react-autosuggest' package is great and people ought to look into using it to meet their needs. If I were more technically adept then I may have been able to make 'react-autosuggest' work. In conjunction with 'downshift' we also use 'react-popper' which is a React wrapper around PopperJS to provide the popover (modal) functionality of our suggestions container. This commit fixes bug: #14 modified: package.json modified: src/MUIPlacesAutocomplete.jsx modified: src/index.js modified: test/setup-dom.js modified: test/test.jsx modified: test/test.jsx.snap modified: yarn.lock
Giners
added a commit
that referenced
this issue
Jan 18, 2018
This commit is really meant to help us trigger a publish of our package via 'semantic-release'. Merge #15 (commit 4ec410a) made fixes (issue #13 & #14) which would dictate we need to rev our version according to semver rules. The individual commits that made fixes followed proper ESLint formatting but the MR title didn't. Since we are using squash and merge 'semantic-release' didn't think the merge should be cause for publishing. modified: README.md
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When the suggestions container of the component is rendered it doesn't render (popover) elements as seen in by this picture:
The result is that when the suggestions are rendered they appear to "blend" in with rendered elements of the same "depth". Also focus/events aren't handled properly as the DOM isn't sure if we want to focus/receive events on the suggestions container/suggestions themselves or the elements sharing the same "depth" as the suggestions container/suggestions.
This ought to be fixed so that the suggestions container is rendered over elements. The elements that it is rendered over shouldn't be visible and not able to receive any focus/events until the suggestions container is no longer being rendered over said elements.
The text was updated successfully, but these errors were encountered: