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

Quick Reblog: Reimplement tag suggestion UI #1612

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

marcustyphoon
Copy link
Collaborator

@marcustyphoon marcustyphoon commented Sep 10, 2024

Description

This manually implements a component similar to the HTML datalist element that we're currently using to show the user tag suggestions. This should result in:

  • Support for Firefox for Android. Resolves Suggest tags from post reblogged not working on firefox mobile #1611.
  • Consistent UI between browsers that we can customize; see the previously linked issue for a buggy example in Kiwi Browser, and note that desktop Firefox and Chrome have noticeably different UI designs (neither of which, imo, look great).
  • Suggestions containing only the suggested tag instead of everything in the tags input box. Usable suggestions when there is more than a small amount of content in the tags input box.
  • A suggestion box that opens consistently, with a single click, in all browsers. Resolves Quick Reblog: Inconsistent suggestion behavior on tag field click #1102.
  • A suggestion box that doesn't disappear and require typing a comma to reopen when a suggestion is clicked (configurable).

Does not use the new <dialog> element or new popover global attribute; I briefly played with both but neither seemed usable for this and the latter lacks browser support. Might be useful for other things, though.

At time of writing, the DOM structure and CSS I created are... uh, let's just say "probably improvable." This feels like one of those PRs that could use the "April fixes everything" special.

Testing steps

Confirm that:

  • Nothing happens if the preference is toggled off
  • The suggestion element appears when the tag input box gains focus
  • The suggestion element looks correct in mobile/desktop widths and in the blog view modal
  • The suggestion element disappears when the user types, unless/until the input box text ends in a comma (and any number of spaces)
  • The suggestion element disappears when the user presses escape, until the user types again with a comma ending the input box text
  • The suggestion element disappears when the user deselects the tag input box
  • Clicking a suggestion adds it to the input box and removes it from the suggestions
  • The correct tag suggestions appear, excluding tags already in the box
  • The suggestion element disappears when there are no valid suggestions
  • Opening the Quick Reblog interface on a different post results in a suggestion element with the correct tag suggestions for that post

Needs further testing for modal logic edge cases. Needs further testing for overflow (e.g. with long suggested tags/many suggested tags). Needs testing on Firefox and real mobile device; smoke tested on Chrome and Chrome responsive design mode.

@marcustyphoon
Copy link
Collaborator Author

I suppose this could be generic and in a util, come to think of it.

@marcustyphoon marcustyphoon marked this pull request as ready for review November 2, 2024 19:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant