Textarea: resize immediately upon receiving resize event

[JulianNymark]

Description

got feedback on buggy behaviour of textarea "jumping" inside a modal (upon opening).

Component Checklist 📝

• JSDoc
• Examples
• Documentation / Decision Records
• Storybook
• Style mappings (@navikt/core/css/config/_mappings.js)
• Component tokens (@navikt/core/css/tokens.json)
• CSS class deprecations (@navikt/aksel-stylelint/src/deprecations.ts)
• Exports (@navikt/core/react/src/index.ts and @navikt/core/react/package.json)
• New component? CSS import (@navikt/core/css/index.css)
• Breaking change? Update migration guide. Consider codemod.
• Changeset (Format: <Component>: <gitmoji?> <Text>. E.g. "Button: ✨ Add feature xyz.")

[changeset-bot]

🦋 Changeset detected

Latest commit: c4243fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@navikt/ds-react	Patch
@navikt/ds-css	Patch
@navikt/ds-tokens	Patch
@navikt/ds-tailwind	Patch
@navikt/aksel-icons	Patch
@navikt/aksel	Patch
@navikt/aksel-stylelint	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Storybook demo

6d4006631 | 91 komponenter | 135 stories

[JulianNymark]

Thinking this could be solved via CSS set on the parent of the element maybe? This could be due to when the resize event is fired, and it happens after the element is added to the dom => gets resized to the new size?

https://github.com/navikt/aksel/blob/main/@navikt/core/react/src/util/TextareaAutoSize.tsx#L187

[HalvorHaugan]

The solution is to run handleResize() on the leading edge of the timeout. Could either add this feature to our current debounce() function, or switch to lodash.

Here is an improved version of our current function in case we want to continue using that:

"use client";
// https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
export default function debounce<T extends unknown[]>(
  func: (...args: T) => void,
  wait = 166,
  leading = false,
) {
  let timeout: ReturnType<typeof setTimeout> | undefined;
  function debounced(this: any, ...args: T) {
    const later = () => {
      timeout = undefined;
      func.apply(this, args);
    };
    if (!timeout && leading) {
      later();
    }
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  }

  debounced.clear = () => {
    clearTimeout(timeout);
  };

  return debounced;
}

I think we should add a comment in TextareaAutoSize.tsx explaining why this is needed. Something like this:

Invoke on leading edge of timeout to avoid delayed resize when toggling visibility (typically modals) (scrollHeight is 0 when hidden)