Hiring Stu

Goal

A segmented textarea with drag control to adjust the segments.

Problems

We can’t control or style children elements within a regular textarea.

Solution

• We render each segment as a span within a contenteditable div.
• We parse the DOM to update the React state when the user inputs text into any segment span.
• And use React.memo to keep the DOM in sync with React without unnecessary re-renders.
• (We also use a keyboard controllable cursor for accessibility when in drag or split mode)

Goal

A simple-to-use input component that automatically formats the user’s input for phone numbers, currencies, credit cards, etc.

Problems

• If we just overwrite the input value with formatting we lose the original value.
• There are lots of edge cases to handle when handling selection ranges, deletes, inserts, and pastes.

Solution

• We keep a record of the underlying value at all times and convert all user changes made to the formatted input back to what the actual change to the real value will be.
• We use extensive testing to ensure all edge cases are handled.