Expose row count information

[emmenko]

Hi,

we're trying to migrate to v8 but we realized that the change in onHeightChange function arguments is causing us to miss on a key feature.

Background

In our UI components library we have a component called MultilineTextInput, which uses the resizable textarea component. One of the features of this component is that when there is value in more than one line, we show an expand/collapse button.

You can see a live example here: https://uikit.commercetools.com/?path=/story/components-inputs--multilinetextinput

To do that, we rely on the valueRowCount exposed by the component.

https://github.com/commercetools/ui-kit/blob/86a85e642d0d47089c3ddd7094974c58badbed56/src/components/inputs/multiline-text-input/multiline-text-input.js#L30-L40

In v8 though, the onHeightChange only exposes the height value.

Ideally, what we need is the internally calculated rowHeight

react-textarea-autosize/src/calculateNodeHeight.ts

Line 50 in 757355d

const rowHeight = hiddenTextarea.scrollHeight - paddingSize;

And to calculate the row count:

const valueRowCount = Math.floor(height / rowHeight);

Proposal

I'm not sure what the best solution here would be. Maybe we can introduce a new callback prop that specifically exposes this value.

What do you think? Do you see any other solution?

I'm happy to work on a PR if we decide how to proceed.

Thanks!

[Andarist]

What you could also leverage is the current count of rendered rows, right?

[emmenko]

Hmm, how do I get that value?

[Andarist]

It's not available right now, I was just wondering if that would be enough for you to handle your use case. In general, I have deliberately removed this extra argument in v8 so I could gather feedback and use cases from consumers of this package so I could add it back knowing more and potentially providing a better API.

[emmenko]

Ah I see, yeah that makes sense.

As for the value that we need for our use case, we basically need to know the number of rows yes, so that we can show/hide the expand/collapse button.

How do you plan to proceed here?

[Andarist]

I will try to give this a thought soon and comment back, but don't have a better solution right now in my mind than just adding an extra argument to onHeightChange callback.

[emmenko]

Thanks, hopefully we can figure something out.

[Andarist]

If you can work with the currently rendered amount of rows (and not with the amount of "value rows") then I think adding this to onHeightChange would make sense. Would you be able to work on adding this?

[emmenko]

Can you clarify the difference between the amount of "rows" and the amount of "value rows"?

For us it's important to know if we need to show the expand/collapse button. This means that if the input has 3 rows and I click on "collapse", I only see the "first" row. However, the "expand" button should be visible because in reality there are 3 rows (2 of them are hidden).

[Andarist]

"rows" - matching native rows attribute. For the same computed height you always get the same amount of rows.
"value rows" - how many rows would get rendered for a particular value with minRows={1} maxRows={Infinity}

If you need to know the latter ("value rows") then I'm not sure if the best place for it would be onHeightChange as a consumer won't be notified about "value rows" being changed while typing if the height doesn't change. We'd need a separate callback for that.

I haven't thought about it extensively so I could have missed something - but I can't see when (in your use case) would you need "value rows" instead of "rows". Could you describe the situation when having just "rows" would fail?

[emmenko]

So if I do this:

const MultilineInput = (props) => {
  const ref = React.useRef();
  const { onHeightChange } = props;
  const handleHeightChange = React.useCallback(
    (height) => {
      console.log('rows', ref.current.rows);
      onHeightChange(height);
    },
    [onHeightChange]
  );
  return (
    <TextareaAutosize
      ref={ref}
      // ...
    />
  );
};

The ref.current.rows attribute is always 2.

If that's what you had in mind, I'm afraid it doesn't work and the value I need is the "value rows".

We'd need a separate callback for that

I think so too, it should probably something separate.

[Andarist]

The ref.current.rows attribute is always 2.

You are accessing textarea's attribute and not the computed value from TextareaAutosize that was available in v7.

I just have thought about an alternative solution. We could expose rowHeight which would allow for computing both "value rows" and "displayed rows" values:

• const valueRows = ref.current.scrollHeight / rowHeight (roughly)
• const displayedRows = height / rowHeight

I understand this would include more boilerplate on your side but would also be more generic solution, accommodating for more use cases to be covered with it. WDYT?

[emmenko]

@Andarist Sounds good to me. How do you wish to expose the rowHeight value?

[Andarist]

A second argument ({ rowHeight: number }) to the onHeightChange callback seems OK to me.

[emmenko]

I opened a PR with your suggestion.

[emmenko]

@Andarist FYI: the new meta option works as expected, I was able to restore the previous behavior.
Thanks again!

[Andarist]

Glad to hear that 👍