make dropdowns searchable #378

trxaphion · 2019-11-05T19:03:32Z

Fixes #267

Proposed changes

as per the above issue the from stop and to stop selects have been replaced with react-select. I tried to emulate MUI's knick knacks as much as possible, although a few things are still unfinished. AFAIK there is:

exit transition for menu
limit input width
optionally make the menu react better to resizing window horizontally while menu is open

will have a go at them sometime soon but made the PR anyway in case there's any feedback

Link to demo, if any

https://open-transit-react-select.herokuapp.com/route/F/direction/F____O_E00

(p.s. yes I did post my username on slack)

akgupta89 · 2019-11-06T03:40:09Z

I tried it on my phone and the dropdowns don't appear to work, works fine on the browser.

Also, it'd be nice to have some cursor input indicator to reveal that this is an input box.

akgupta89

Fantastic job! Looks great to merge and functions beautifully.

trxaphion · 2019-11-16T06:45:59Z

Thanks @akgupta89 . I should note that I don't know if the menu placement will work with iOS since I read on some old posts that their keyboard doesn't fire the resize event. I tried testing it on heroku via browserstack (trial) but it doesn't seem to load at all, and I can't seem to get browserstack local to work either. I have no way of testing so it may have to be a separate issue for someone else if you want it fixed.

Also using the back gesture/button to close the keyboard on mobile doesn't work because the input needs to be re-focused after the resize, which of course re-opens the keyboard. I don't know a solution to this at present.

I am currently working on fixing the menu's exit transition if you want to wait for that.

exxonvaldez

Generally looks pretty nice. In addition to some feedback on the source code, I noticed some minor issues with the UI behavior listed below.

Agree that on mobile it would be nice to be able to close the keyboard without closing the select. Menu placement looks fine on iPhoneX. However, in portrait mode, you can only see 4 menu items. In landscape, you can only see one. Any attempt to scroll to see more fails, as the page scrolls back to show just the 4 or 1 again. I don't know to fix this, although I would say the automatic repositioning of the page seems kind of intrusive.
Noticed a weird issue on the iPhone where, after making a selection, if I tap on the select again, it keeps showing the "focus" animation (the dark line under the text input). Also, clicking on the menu items has no effect.
On Chrome on the Mac, when focusing the ReactSelect with the keyboard, it doesn't have background shading like the Material UI Select.

ReactSelect:

MUI Select:

On Chrome on the Mac, when opening the ReactSelect with the keyboard, the top menu item has keyboard focus. With MUI Select, the currently selected menu item is focused.
On Chrome on the Mac, when typing a search input, mouse clicks can be used to move the text cursor within the text. Click to the right of the text, though, closes the ReactSelect.

exxonvaldez · 2019-11-16T10:24:21Z

frontend/src/actions/index.js

-        params: { query: query, variables: JSON.stringify(params) },
+    axios
+      .get('/api/graphql', {
+        params: { query, variables: JSON.stringify(params) },


Doesn't look like anything significant was changed here? Can you revert changes in this file?

sorry my bad habit of staging all files. I didn't actually make the change, I assume it was the Prettier code formatter that ran pre-commit

exxonvaldez · 2019-11-16T10:29:06Z

frontend/src/components/ReactSelect.jsx

+  const menuPlacementTop = useRef(false);
+  const [textFieldDOMRect, setTextFieldDOMRect] = useState({});
+
+  function handleReposition() {


There's a lot going on in this file. Can you add some comments to help explain what the issues and fixes are, like what happens if we don't have this resize/scroll handler?

exxonvaldez · 2019-11-16T10:30:40Z

frontend/src/components/ReactSelect.jsx

+    }
+
+    useEffect(() => {
+      const menu = document.getElementById(`${selectProps.inputId}Menu`);


This logic is also pretty complicated. Can you add comments explaining what it does? Is it borrowed from somewhere? If so, cite the source here.

hathix · 2019-11-21T03:52:30Z

Terence makes a good point that this might look bad on small screens -- like a phone when the keyboard pops up.

Indeed, it looked pretty bad for me:

We agree we'd like to hide this typing input on phones. It's hard to judge what's a phone based on the screen size -- that screenshot is 2160 pixels tall (taller than my Macbook!). Judging based on the presence of a keyboard is hard and kinda flaky.

Perhaps you could listen for a resize event (which gets fired when a soft keyboard is opened), and in that case, use blur to ban typing.

Or you could do it the quick and dirty way by sniffing the user agent for Android or iOS and use this StackOverflow answer to stop typing entirely.

trxaphion · 2019-11-22T10:10:26Z

The focus issue was due to my novice mistake of declaring the components inside the select render so they were recreated each render.

Noticed a weird issue on the iPhone where, after making a selection, if I tap on the select again, it keeps showing the "focus" animation (the dark line under the text input)

Closing the soft keyboard should now work but after fixing the above issue makes pressing the select afterwards blur the input instead of bringing the keyboard back up. Is this still preferable over retaining focus and leaving the menu open on every click of the select?

hathix · 2019-11-24T23:20:20Z

It works pretty well on my Android now -- I can see the dropdown, soft keyboard, and text input field all at once. But sometimes I get this weird problem when I click on one field:

hathix · 2019-11-24T23:21:45Z

Compare to expected behavior:

hathix

See if you can fix the white-space-on-top bug I just mentioned.

trxaphion · 2019-11-30T15:05:53Z

sorry @hathix but I couldn't reproduce your issue. The only suspect I have is your device somehow scrolled after I locked page scrolling on menu open with document.body.style.overflow = 'hidden'.

I removed it from the heroku demo so see if you can reproduce it again.

hathix · 2019-12-05T01:09:12Z

Yes, now I'm no longer getting that problem.

hathix

You can merge this once you fix the merge conflicts.

exxonvaldez · 2019-12-05T01:27:34Z

I think I'm still seeing issues 3, 4, and 5. But the major problems seems to be gone. You can create new issues in github for those if you prefer.

Also, just a reminder that we merged in some css-based map effected when you hover over a dropdown menu item. Hopefully not too hard to port over to your code, in the end it was based on some simple events. #416

exxonvaldez · 2019-12-10T08:11:35Z

On narrow windows, when I start typing into the ReactSelect, the layout changes from one column to two column. Is the react-select component missing all the logic that the normal React Select has for menu placement? Seems like it is a lot of work to reimplement all the same layout logic.

trxaphion · 2019-12-11T06:02:44Z

No, it is the same. My menu placement only affects the dropdown menu. What you're seeing is react-select removing the placeholder/value when you type so the width is reverting to the min-width specified by the form control.

The menu going offscreen as a result is a different story though, will have to update position onkeyup maybe.

trxaphion · 2019-12-16T05:51:56Z

issue 4 seems to be a current react-select issue (JedWatson/react-select#3656), and I don't see a way to explicitly set their internal focus option to work around it

aside from that I think all other issues mentioned above have been covered?

exxonvaldez · 2019-12-16T06:56:48Z

Looks good, thanks for putting in so many fixes. Seems fine to wait for react-select to fix #4.

hathix · 2020-01-09T01:17:13Z

Let's merge this once we fix the merge conflict. Anyone want to take that on? Doesn't look too awful.

hathix · 2020-01-16T02:52:12Z

Wenyu, do you have the remaining merge conflicts fixed?

hathix · 2020-01-30T02:10:03Z

Thanks @trxaphion and @zachzwy for fixing merge conflicts!

hathix · 2020-01-30T02:10:32Z

Tip: if your PR is approved and just pending merge conflict fixes, you can go ahead and merge as soon as you've fixed the merge conflicts.

make dropdowns searchable

de9b694

trxaphion requested review from akgupta89, ckrajewski and exxonvaldez as code owners November 5, 2019 19:03

trxaphion added 6 commits November 8, 2019 17:19

placeholder more indicative of input

957a400

fix padding and mobile device bug

8f09150

limit input width

db42b6a

improved menu placement

9d61735

removed transition during resize

0e505e2

scroll to selected option

0950175

akgupta89 approved these changes Nov 16, 2019

View reviewed changes

exxonvaldez requested changes Nov 16, 2019

View reviewed changes

added comments

80b43ce

fix focus issue after re-render

4b41a8e

trxaphion force-pushed the react-select branch from 95919aa to 4b41a8e Compare November 22, 2019 09:05

hathix requested changes Nov 24, 2019

View reviewed changes

hathix approved these changes Dec 5, 2019

View reviewed changes

trxaphion and others added 4 commits December 5, 2019 17:37

remove page scroll lock

b8b3709

fix no scroll when navigating menu options with keyboard

e8b607f

tab focuses select, menu open by state

d0cae5a

Merge branch 'master' into react-select

4127214

port menu option hover

f4e8765

trxaphion added 3 commits December 12, 2019 18:01

input has min width when typing

489c804

move functions out of renders, clean up code

d9e65f3

fix exit transition

3a0d233

exxonvaldez approved these changes Dec 16, 2019

View reviewed changes

Merge branch 'master' into react-select

65a04f5

Merge branch 'master' into react-select

1d8038d

hathix merged commit 5ead624 into trynmaps:master Jan 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

make dropdowns searchable #378

make dropdowns searchable #378

trxaphion commented Nov 5, 2019 •

edited

Loading

akgupta89 commented Nov 6, 2019

akgupta89 left a comment

trxaphion commented Nov 16, 2019 •

edited

Loading

exxonvaldez left a comment

exxonvaldez Nov 16, 2019

trxaphion Nov 16, 2019

exxonvaldez Nov 16, 2019

exxonvaldez Nov 16, 2019

hathix commented Nov 21, 2019

trxaphion commented Nov 22, 2019 •

edited

Loading

hathix commented Nov 24, 2019 •

edited

Loading

hathix commented Nov 24, 2019

hathix left a comment

trxaphion commented Nov 30, 2019

hathix commented Dec 5, 2019

hathix left a comment

exxonvaldez commented Dec 5, 2019

exxonvaldez commented Dec 10, 2019

trxaphion commented Dec 11, 2019

trxaphion commented Dec 16, 2019

exxonvaldez commented Dec 16, 2019

hathix commented Jan 9, 2020

hathix commented Jan 16, 2020

hathix commented Jan 30, 2020

hathix commented Jan 30, 2020

make dropdowns searchable #378

make dropdowns searchable #378

Conversation

trxaphion commented Nov 5, 2019 • edited Loading

Proposed changes

Link to demo, if any

akgupta89 commented Nov 6, 2019

akgupta89 left a comment

Choose a reason for hiding this comment

trxaphion commented Nov 16, 2019 • edited Loading

exxonvaldez left a comment

Choose a reason for hiding this comment

exxonvaldez Nov 16, 2019

Choose a reason for hiding this comment

trxaphion Nov 16, 2019

Choose a reason for hiding this comment

exxonvaldez Nov 16, 2019

Choose a reason for hiding this comment

exxonvaldez Nov 16, 2019

Choose a reason for hiding this comment

hathix commented Nov 21, 2019

trxaphion commented Nov 22, 2019 • edited Loading

hathix commented Nov 24, 2019 • edited Loading

hathix commented Nov 24, 2019

hathix left a comment

Choose a reason for hiding this comment

trxaphion commented Nov 30, 2019

hathix commented Dec 5, 2019

hathix left a comment

Choose a reason for hiding this comment

exxonvaldez commented Dec 5, 2019

exxonvaldez commented Dec 10, 2019

trxaphion commented Dec 11, 2019

trxaphion commented Dec 16, 2019

exxonvaldez commented Dec 16, 2019

hathix commented Jan 9, 2020

hathix commented Jan 16, 2020

hathix commented Jan 30, 2020

hathix commented Jan 30, 2020

trxaphion commented Nov 5, 2019 •

edited

Loading

trxaphion commented Nov 16, 2019 •

edited

Loading

trxaphion commented Nov 22, 2019 •

edited

Loading

hathix commented Nov 24, 2019 •

edited

Loading