Where were going we don't need forms! by Juls GudWhere were going we don't need forms! by Juls Gud

Where were going we don't need forms!

Juls Gud

Frontend Engineer

Quantum Engineer

GraphQL

React

TypeScript

Like this project

Posted Aug 11, 2023

Who said capturing user input can't be fun? We recently redesigned our project creation at Contra and this is where we landed at.

Likes

Views

The problem: select/text input w the 💊s

Across the web you see this pattern quite a bit. Its easy to implement with some library like downshift, but it requires a form.

No boxes please!

Blehh 🫤 Where we're going we don't need forms (at least visually!)

The solution: the floating select

Sevan designed a great approach to this that ditches the form. We basically only need an anchor (1), a trigger (2), a floating select (3):

The elements

The pills can then float freely with the content while we hide the tools to add them. We are still technically using a form, but we hide it completely and only display the elements that matter WHEN they matter.

Looking great!

Setting up w floating UI

1. useState and useFloating

const [isOpen, setIsOpen] = useState(false);
const { reference, ...rolesFloatingProps } = useFloating({
  middleware: [offset(4), flip()],
  open: isOpen,
  placement: 'bottom-start',
});

2. List ref and useInteractions

Check out the floating docs for more details on the actual hooks. The list navigation seems a bit wordy but it works like a charm.

const listRef = useRef<Array<HTMLElement | null>>([]);
const [activeIndex, setActiveIndex] = useState<number | null>(null);
const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
  [
    useRole(context, { role: 'listbox' }),
    useDismiss(context, { escapeKey: true, outsidePress: false }),
    useListNavigation(context, {
      activeIndex,
      listRef,
      loop: true,
      onNavigate: (index) => {
        onNavigate?.();
        setActiveIndex(index);
      },
      orientation: 'vertical',
      virtual: true,
    }),
  ],
);

  useLayoutEffect(() => {
    requestAnimationFrame(() => {
      if (activeIndex !== null) {
        listRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' });
      }
    });
  }, [activeIndex]);

3. Setting up the ui components

       {isOpen ? (
        <DialogSelect
          $strategy={strategy}
          $x={x}
          $y={y}
          ref={floating}
        >
          <DialogSelect.Input
            {...getReferenceProps({
              aria-autocomplete': 'list',
              autoFocus: true,
              onBlur: (event) => {
                if (event.target !== document.activeElement) {
                  onClose();
                }
              },
              onChange: (event: ChangeEvent<HTMLInputElement>) => {
                setInputValue(event.target.value);
              },
              onKeyDown: handleKeyDown,
              placeholder: 'Search skills...',
              tabIndex: -1,
              value: inputValue,
            })}
          />

          <DialogSelect.List
            {...getFloatingProps()}
          >
            {skills.map((skill) => (
              <DialogSelect.ListItem
                key={id}
                {...getItemProps({
                  id,
                  onClick: () => handleSelect(skill),
                  onKeyDown: () => handleSelect(skill),
                  ref: (node) => {
                    listRef.current[index] = node;
                  },
                })}
              >
                {skill.name}
              </DialogSelect.ListItem>
            )}
          </DialogSelect.List>
        </DialogSelect>
      ) : null}

And voila! Just like that we have much better experience that kicks the old form.