Feat/full custom select by sean-brydon · Pull Request #6865 · calcom/cal.diy

sean-brydon · 2023-02-03T11:23:26Z

What does this PR do?

Code probably needs a bit of cleanup but thought i'd put it out here to see if anyone has any suggestions/improvements first

Full custom select component that matches 95% of WCAG a11y guidelines (I will work on improving in due course - react-select doesnt seem to even be 100%)

This is not used within the app anywhere as of right now. Just been implemented in isolation in storybook.

TODO (maybe in future PR)

Where does the focus go after you've select an item when it isn't a multiselect? It doesn't go back to the select itself at least, resulting in that I can not hit space/enter again to reopen the select. I think that's the desired behaviour.

Fixes #6593

Loom Video: https://www.loom.com/share/436b048792514d4b8e6e8907e90bd5b5

Environment: Staging(main branch) / Production

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

vercel · 2023-02-03T11:25:08Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
cal	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 13, 2023 at 1:52PM (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 13, 2023 at 1:52PM (UTC)

sean-brydon · 2023-02-03T11:39:34Z

+      placeHolderRef.addEventListener("keydown", downHandler);
+      placeHolderRef.addEventListener("keyup", upHandler);
+      return () => {
+        placeHolderRef?.removeEventListener("keydown", downHandler);
+        placeHolderRef?.removeEventListener("keyup", upHandler);
+      };
+    } else {
+      window.addEventListener("keydown", downHandler);
+      window.addEventListener("keyup", upHandler);
+      // Remove event listeners on cleanup
+      return () => {
+        window.removeEventListener("keydown", downHandler);
+        window.removeEventListener("keyup", upHandler);
+      };


Handle keypress on the red or when in a window

Usefull if you only wanna do stuff when something is focused

sean-brydon · 2023-02-03T11:40:53Z

+  const isSelected =
+    (Array.isArray(selectedItems) && selectedItems?.some((selection) => selection.value === item.value)) ||
+    (!Array.isArray(selectedItems) && selectedItems?.value === item.value);
+


Check if its selected based if we're using multiple or not

sean-brydon · 2023-02-03T11:41:37Z

+          <div
+            className={cn(
+              "flex h-4 w-4 items-center justify-center rounded-[4px]  border ltr:mr-2 rtl:ml-2",
+              isSelected ? "bg-gray-800 text-gray-50" : "text-primary-600 border-gray-300 bg-gray-50"
+            )}>
+            {isSelected && <FiCheck className="h-3 w-3 text-current" />}
+          </div>
+        </li>


Fake checkbox as the input item would highjack focus and also have weird on event handlers attached

sean-brydon · 2023-02-03T11:42:09Z

+  searchBoxRef: React.RefObject<HTMLInputElement>;
+}
+
+type FlatternedOption = Option & { current: number; groupedIndex?: number };


We flattern optional to include the count and also the index of the group it is attached to (If any)

sean-brydon · 2023-02-03T11:42:48Z

+const flatternOptions = (options: Option[], groupCount?: number): FlatternedOption[] => {
+  return options.reduce((acc, option, current) => {
+    if (option.options) {
+      return [...acc, ...flatternOptions(option.options, current + (groupCount || 0))];


Recursivly call this is we have options -> current + group count keeps track of where we are in the inital list

Needed to reference label and handle keyboard navigation correctly

sean-brydon · 2023-02-03T11:43:06Z

+  const upPress = useKeyPress("ArrowUp", searchBoxRef);
+  const enterPress = useKeyPress("Enter", searchBoxRef);
+
+  const flatternedList = useMemo(() => flatternOptions(list), [list]);


flattern the list on the inital list passed in

sean-brydon · 2023-02-03T11:43:29Z

+  const totalOptionsLength = useMemo(() => {
+    return flatternedList.length;
+  }, [flatternedList]);


Calculate the length of this - needed to get the min and max bounds of the array for keyboard navigation

sean-brydon · 2023-02-03T11:44:18Z

+  useEffect(() => {
+    if (downPress) {
+      // Cycle to start of list if at end
+      setKeyboardFocus((prev) => (prev + 1) % totalOptionsLength);


add one to previous take the % of it

e.g list size of 10
10+1 % 10 = 1

Great use of the modular operator!

sean-brydon · 2023-02-03T11:44:27Z

+  useEffect(() => {
+    if (upPress) {
+      // Cycle to end of list if at start
+      setKeyboardFocus((prev) => (prev - 1 + totalOptionsLength) % totalOptionsLength);


Same as above but in reverse

sean-brydon · 2023-02-03T11:45:40Z

+      {filteredList?.map((item, index) => {
+        const focused = index === keyboardFocus;
+        return (
+          <React.Fragment key={index}>
+            <div className="px-2.5">
+              {item.current === 0 && item.groupedIndex !== undefined && (
+                <Label>{list[item.groupedIndex].label}</Label>
+              )}
+              <Item item={item} index={index} focused={focused} />
+            </div>
+          </React.Fragment>
+        );


Render all items - if its the first item in the list render a label before it

sean-brydon · 2023-02-03T11:45:59Z

+  classNames?: {
+    menuButton?: ({ isDisabled }: { isDisabled: boolean }) => string;
+    menu?: string;
+    tagItem?: ({ isDisabled }: { isDisabled: boolean }) => string;
+    tagItemText?: string;
+    tagItemIconContainer?: string;
+    tagItemIcon?: string;
+    list?: string;
+    listGroupLabel?: string;
+    listItem?: ({ isSelected }: { isSelected: boolean }) => string;
+    listDisabledItem?: string;
+    ChevronIcon?: ({ open }: { open: boolean }) => string;
+    searchContainer?: string;
+    searchBox?: string;
+    searchIcon?: string;
+    closeIcon?: string;
+  };


WIP styles override if needed

Nice — I think this is a super simple approach of overriding the styles. Very easy to use, clear on how it works 👏

sean-brydon · 2023-02-03T11:47:37Z

+  const onPressEnterOrSpace = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      if ((e.code === "Enter" || e.code === "Space") && !isDisabled) {
+        toggle();
+      }
+    },
+    [isDisabled, toggle]
+  );


Handle open on space or enter if its not disabled

PeerRich · 2023-02-07T20:21:34Z

Great new commits @sean-brydon, very happy with what I see. One thing we might be missing still but I think is good if we add straight away is dark mode. Could you check with @Jaibles about this?

~~not sure, i think the public booking page will continue to use react-select-timezone right?~~

nevermind. routing forms have selects and darkmdoe

sean-brydon · 2023-02-07T20:42:42Z

Great new commits @sean-brydon, very happy with what I see. One thing we might be missing still but I think is good if we add straight away is dark mode. Could you check with @Jaibles about this?

~~not sure, i think the public booking page will continue to use react-select-timezone right?~~

nevermind. routing forms have selects and darkmdoe

Will pick this up tomorrow should be a quick win to implement :)

sean-brydon · 2023-02-08T10:10:32Z

@PeerRich @JeroenReumkens Darkmode been commited :)

JeroenReumkens · 2023-02-08T10:58:32Z

Great work @sean-brydon! Just tested again and noticed two other small issues;

I think the disabled states for section titles got lost when implementing dark mode? I also see that the section title has a checkbox even though you can not check that (or should it work as a "select all below"?)
When selecting options in a multi select, I see the dropdown itself also grows in size. Somehow it feels a bit annoying. What do you think? 🤔

PeerRich · 2023-02-08T16:24:11Z

lemme put this on auto merge, @sean-brydon can you ping @JeroenReumkens once you addressed the changes and @JeroenReumkens can you approve after?

sean-brydon · 2023-02-09T10:21:14Z

@JeroenReumkens I have fixed the disabled state

I can't replicate

When selecting options in a multi select, I see the dropdown itself also grows in size. Somehow it feels a bit annoying. What do you think? 🤔

At all - you got a demo of that happening?

JeroenReumkens

Great work @sean-brydon , approved!

sean-brydon added 9 commits February 2, 2023 12:47

Inital Setup - refactors/optimise

5da4f02

Escape clears focus

d1e0400

A11y and optimisations

17e6875

A11y enter fix

abf7f81

Sort out flatternt list indexing

56e6fc9

Fix spacing - fix single selected state

0f71cce

Solves group highlights breaking things

0060118

Fix selecting while filtering list

7108e27

Remove styles and rename story

79c85d9

sean-brydon marked this pull request as draft February 3, 2023 11:23

Hide labels while searching for now

1be08a4

vercel Bot had a problem deploying to Preview – ui February 3, 2023 11:33 Failure

vercel Bot deployed to Preview – cal February 3, 2023 11:38 View deployment

sean-brydon commented Feb 3, 2023

View reviewed changes

Remove group item

bbc977e

sean-brydon commented Feb 3, 2023

View reviewed changes

vercel Bot had a problem deploying to Preview – ui February 3, 2023 11:44 Failure

sean-brydon commented Feb 3, 2023

View reviewed changes

Comment thread packages/ui/components/form/selectimproved/components/Options.tsx

sean-brydon commented Feb 3, 2023

View reviewed changes

Comment thread packages/ui/components/form/selectimproved/components/Select.tsx

sean-brydon commented Feb 7, 2023

View reviewed changes

Comment thread packages/ui/components/form/selectimproved/components/Options.tsx

vercel Bot had a problem deploying to Preview – ui February 7, 2023 10:28 Failure

vercel Bot deployed to Preview – cal February 7, 2023 10:33 View deployment

sean-brydon added 3 commits February 7, 2023 12:43

Style updates with ciaran

72672a5

Final style changes

b585f10

center icon

cb86986

vercel Bot had a problem deploying to Preview – ui February 7, 2023 13:50 Failure

vercel Bot deployed to Preview – cal February 7, 2023 13:54 View deployment

Add darkmode

d761911

vercel Bot had a problem deploying to Preview – ui February 8, 2023 10:10 Failure

vercel Bot deployed to Preview – cal February 8, 2023 10:18 View deployment

sean-brydon mentioned this pull request Feb 8, 2023

Feat/select downshift #6810

Closed

2 tasks

PeerRich enabled auto-merge (squash) February 8, 2023 16:05

PeerRich disabled auto-merge February 8, 2023 16:05

PeerRich enabled auto-merge (squash) February 8, 2023 16:23

Fix disabled state

27dd1ef

vercel Bot deployed to Preview – ui February 9, 2023 10:24 View deployment

vercel Bot deployed to Preview – cal February 9, 2023 10:29 View deployment

Fix max-w-

9802413

vercel Bot deployed to Preview – ui February 13, 2023 13:51 View deployment

vercel Bot deployed to Preview – cal February 13, 2023 13:52 View deployment

JeroenReumkens approved these changes Feb 13, 2023

View reviewed changes

PeerRich merged commit c68ff54 into main Feb 13, 2023

PeerRich deleted the feat/full-custom-select branch February 13, 2023 14:14

Conversation

sean-brydon commented Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

Uh oh!

vercel Bot commented Feb 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

PeerRich commented Feb 7, 2023

Uh oh!

sean-brydon commented Feb 7, 2023

Uh oh!

sean-brydon commented Feb 8, 2023

Uh oh!

JeroenReumkens commented Feb 8, 2023

Uh oh!

PeerRich commented Feb 8, 2023

Uh oh!

sean-brydon commented Feb 9, 2023

Uh oh!

JeroenReumkens left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sean-brydon commented Feb 3, 2023 •

edited

Loading

vercel Bot commented Feb 3, 2023 •

edited

Loading