Closed AndreasPresthammer closed 1 week ago
Thanks, we'll take a look!
Ok so first of all, SideSheet
is irrelevant here, it happens regardless.
This seems like default browser behavior to me as a response to how the useAutoResize hook works (setting height to auto to measure heigth and then setting a new height) causing it to scroll to the top automatically. Before we entirely rethink how to do this in a different way, is it possible for you get around this by setting rowsmax
to a lower number so you don't end up with a textare taller than the screen? 😅
I believe a workaround for us would depend on how fast you expect to have a solution to this issue. 1 day, 1 week, 1month?
A workaround you could do
<TextField
id="storybook-multiline"
label="Multiline"
multiline
rows={3}
textareaRef={(node) => {
if (node) {
node.style.resize = 'vertical'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
/*@ts-ignore*/
node.style.fieldSizing = 'content'
}
}}
/>
field-sizing will make the textarea grow automatically, but is currently only supported in chrome/edge. User with firefox can still always just resize manually my dragging the corner though. Meanwhile we propably won't have time to look at this issue more until after the summer some time
Ok, thanks for the feedback! :)
Closing this for now
Using a multiline TextField in a SideSheet component with a scrollbar will cause the SideSheet scrollbar to jump to the top when editing the TextField.
Repro can be found here: https://codesandbox.io/p/sandbox/laughing-matsumoto-tlx84t?file=%2Fsrc%2FApp.tsx
Click into the linked repro and edit the text in the TextField in the SideSheet. Observe that the scrollbar of the SideSheet jumps to the top.
Expected behavior
Expect the scroll to not jump to the top when editing a TextField.
Specifications
@equinor/eds-core-react@0.39.0