Where were going we don't need forms!

Portfolio project

Recently had the chance to rework the project creation UI for Contra projects a bit. The most fun + challenging part was adding a dialog select input that made adding skills, tools and clients to a project without needing to go into a separate flow.

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}