From a72e6ea399c1fdc65a39a99cf2243ba2cfa8804c Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 09:58:39 +0200 Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=90=9B=20Fix=20rowsMax=20and=20textar?= =?UTF-8?q?ea=20update=20on=20first=20render?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit bug caused by function only triggered by a key event --- .../src/components/TextField/TextField.stories.tsx | 6 +++++- libraries/core-react/src/components/Textarea/Textarea.tsx | 5 ++++- libraries/core-react/src/hooks/useAutoResize.ts | 8 +++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/libraries/core-react/src/components/TextField/TextField.stories.tsx b/libraries/core-react/src/components/TextField/TextField.stories.tsx index d60aab67a7..80facded22 100644 --- a/libraries/core-react/src/components/TextField/TextField.stories.tsx +++ b/libraries/core-react/src/components/TextField/TextField.stories.tsx @@ -118,6 +118,9 @@ export const types: Story = () => ( types.storyName = 'Types of input fields' +const value = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus sit amet velit in tristique. Morbi ultrices arcu sit amet enim scelerisque euismod. Donec blandit malesuada felis vitae accumsan. Proin vel nisi vel orci bibendum facilisis sit amet vitae nibh. Fusce eros nisl, auctor et erat quis, malesuada accumsan ligula. Nullam gravida eu enim sed pellentesque. Phasellus tincidunt consequat elit. Integer et neque imperdiet, commodo lacus a, commodo tellus.' + export const Multiline: Story = () => ( <> = () => ( label="Multiline with rowsMax" multiline style={{ resize: 'none' }} + defaultValue={value} rows={3} - rowsMax={10} + rowsMax={5} /> ) diff --git a/libraries/core-react/src/components/Textarea/Textarea.tsx b/libraries/core-react/src/components/Textarea/Textarea.tsx index d1df86c691..87cedb3df8 100644 --- a/libraries/core-react/src/components/Textarea/Textarea.tsx +++ b/libraries/core-react/src/components/Textarea/Textarea.tsx @@ -69,7 +69,8 @@ const StyledTextarea = styled.textarea` border: none; appearance: none; background: ${input.background}; - + height: 100%; + overflow: hidden; ${({ spacings }) => spacingsTemplate(spacings)} ${typographyTemplate(input.typography)} @@ -124,6 +125,8 @@ export const Textarea = forwardRef( const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding useAutoResize(textareaEl, maxHeight) + console.log() + const inputProps = { ref: useCombinedRefs(ref, setTextareaEl), type, diff --git a/libraries/core-react/src/hooks/useAutoResize.ts b/libraries/core-react/src/hooks/useAutoResize.ts index bbce0226aa..4417c53bb6 100644 --- a/libraries/core-react/src/hooks/useAutoResize.ts +++ b/libraries/core-react/src/hooks/useAutoResize.ts @@ -8,8 +8,8 @@ export const useAutoResize = ( ): void => { useEffect(() => { const handleResize = () => { - targetEl.style.height = 'auto' let newHeight = targetEl.clientHeight + if (!maxHeight || maxHeight > newHeight) { newHeight = Math.max(targetEl.scrollHeight, newHeight) if (maxHeight) { @@ -18,9 +18,15 @@ export const useAutoResize = ( if (newHeight > targetEl.clientHeight) { targetEl.style.height = `${newHeight}px` } + } else if (maxHeight) { + targetEl.style.overflow = 'auto' } } + if (targetEl) { + handleResize() + } + targetEl?.addEventListener('keyup', handleResize, true) return () => { From de5f776506551cab8236931d42e1127c3e977158 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 11:19:26 +0200 Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=90=9B=20Flickering=20scrollbar=20par?= =?UTF-8?q?tly=20fixed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Still flickers if you delete default text and edit again --- .../src/components/TextField/TextField.stories.tsx | 4 ---- libraries/core-react/src/components/Textarea/Textarea.tsx | 4 +--- libraries/core-react/src/hooks/useAutoResize.ts | 5 ++++- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/libraries/core-react/src/components/TextField/TextField.stories.tsx b/libraries/core-react/src/components/TextField/TextField.stories.tsx index 80facded22..daa0fbfd5f 100644 --- a/libraries/core-react/src/components/TextField/TextField.stories.tsx +++ b/libraries/core-react/src/components/TextField/TextField.stories.tsx @@ -118,9 +118,6 @@ export const types: Story = () => ( types.storyName = 'Types of input fields' -const value = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus sit amet velit in tristique. Morbi ultrices arcu sit amet enim scelerisque euismod. Donec blandit malesuada felis vitae accumsan. Proin vel nisi vel orci bibendum facilisis sit amet vitae nibh. Fusce eros nisl, auctor et erat quis, malesuada accumsan ligula. Nullam gravida eu enim sed pellentesque. Phasellus tincidunt consequat elit. Integer et neque imperdiet, commodo lacus a, commodo tellus.' - export const Multiline: Story = () => ( <> = () => ( label="Multiline with rowsMax" multiline style={{ resize: 'none' }} - defaultValue={value} rows={3} rowsMax={5} /> diff --git a/libraries/core-react/src/components/Textarea/Textarea.tsx b/libraries/core-react/src/components/Textarea/Textarea.tsx index 87cedb3df8..5351337d6d 100644 --- a/libraries/core-react/src/components/Textarea/Textarea.tsx +++ b/libraries/core-react/src/components/Textarea/Textarea.tsx @@ -69,7 +69,7 @@ const StyledTextarea = styled.textarea` border: none; appearance: none; background: ${input.background}; - height: 100%; + height: auto; overflow: hidden; ${({ spacings }) => spacingsTemplate(spacings)} ${typographyTemplate(input.typography)} @@ -125,8 +125,6 @@ export const Textarea = forwardRef( const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding useAutoResize(textareaEl, maxHeight) - console.log() - const inputProps = { ref: useCombinedRefs(ref, setTextareaEl), type, diff --git a/libraries/core-react/src/hooks/useAutoResize.ts b/libraries/core-react/src/hooks/useAutoResize.ts index 4417c53bb6..06ebc69fd6 100644 --- a/libraries/core-react/src/hooks/useAutoResize.ts +++ b/libraries/core-react/src/hooks/useAutoResize.ts @@ -8,6 +8,7 @@ export const useAutoResize = ( ): void => { useEffect(() => { const handleResize = () => { + targetEl.style.height = 'auto' let newHeight = targetEl.clientHeight if (!maxHeight || maxHeight > newHeight) { @@ -18,7 +19,9 @@ export const useAutoResize = ( if (newHeight > targetEl.clientHeight) { targetEl.style.height = `${newHeight}px` } - } else if (maxHeight) { + } + + if (maxHeight <= targetEl.clientHeight) { targetEl.style.overflow = 'auto' } } From 2a7694d900e0b171c8ff7b788c37a3c7959118cb Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 11:21:56 +0200 Subject: [PATCH 3/8] =?UTF-8?q?=E2=8F=AA=20Revert=20unecessary=20change?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core-react/src/components/TextField/TextField.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libraries/core-react/src/components/TextField/TextField.stories.tsx b/libraries/core-react/src/components/TextField/TextField.stories.tsx index daa0fbfd5f..d60aab67a7 100644 --- a/libraries/core-react/src/components/TextField/TextField.stories.tsx +++ b/libraries/core-react/src/components/TextField/TextField.stories.tsx @@ -147,7 +147,7 @@ export const Multiline: Story = () => ( multiline style={{ resize: 'none' }} rows={3} - rowsMax={5} + rowsMax={10} /> ) From 28270cacaf203cb0f3dfa2f4ff5816f6653b5f9f Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 11:43:22 +0200 Subject: [PATCH 4/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Scrollbar=20problem=20?= =?UTF-8?q?improved?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TextField/TextField.stories.tsx | 6 +++++- libraries/core-react/src/hooks/useAutoResize.ts | 8 ++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/libraries/core-react/src/components/TextField/TextField.stories.tsx b/libraries/core-react/src/components/TextField/TextField.stories.tsx index d60aab67a7..51ecb76f51 100644 --- a/libraries/core-react/src/components/TextField/TextField.stories.tsx +++ b/libraries/core-react/src/components/TextField/TextField.stories.tsx @@ -118,6 +118,9 @@ export const types: Story = () => ( types.storyName = 'Types of input fields' +const value = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus sit amet velit in tristique. Morbi ultrices arcu sit amet enim scelerisque euismod. Donec blandit malesuada felis vitae accumsan. Proin vel nisi vel orci bibendum facilisis sit amet vitae nibh. Fusce eros nisl, auctor et erat quis, malesuada accumsan ligula. Nullam gravida eu enim sed pellentesque. Phasellus tincidunt consequat elit. Integer et neque imperdiet, commodo lacus a, commodo tellus.' + export const Multiline: Story = () => ( <> = () => ( label="Multiline with rowsMax" multiline style={{ resize: 'none' }} + defaultValue={value} rows={3} - rowsMax={10} + rowsMax={100} /> ) diff --git a/libraries/core-react/src/hooks/useAutoResize.ts b/libraries/core-react/src/hooks/useAutoResize.ts index 06ebc69fd6..b65ce164bc 100644 --- a/libraries/core-react/src/hooks/useAutoResize.ts +++ b/libraries/core-react/src/hooks/useAutoResize.ts @@ -15,15 +15,15 @@ export const useAutoResize = ( newHeight = Math.max(targetEl.scrollHeight, newHeight) if (maxHeight) { newHeight = Math.min(maxHeight, newHeight) + if (targetEl.scrollHeight > maxHeight) { + console.log(targetEl.scrollHeight, newHeight, maxHeight) + targetEl.style.overflow = 'auto' + } } if (newHeight > targetEl.clientHeight) { targetEl.style.height = `${newHeight}px` } } - - if (maxHeight <= targetEl.clientHeight) { - targetEl.style.overflow = 'auto' - } } if (targetEl) { From b802c4007d2600b430c0ec1991f98ebb1c1aa470 Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 11:47:59 +0200 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=94=A5=20Remove=20some=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TextField/TextField.stories.tsx | 6 +----- libraries/core-react/src/hooks/useAutoResize.ts | 4 ++-- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/libraries/core-react/src/components/TextField/TextField.stories.tsx b/libraries/core-react/src/components/TextField/TextField.stories.tsx index 51ecb76f51..d60aab67a7 100644 --- a/libraries/core-react/src/components/TextField/TextField.stories.tsx +++ b/libraries/core-react/src/components/TextField/TextField.stories.tsx @@ -118,9 +118,6 @@ export const types: Story = () => ( types.storyName = 'Types of input fields' -const value = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus sit amet velit in tristique. Morbi ultrices arcu sit amet enim scelerisque euismod. Donec blandit malesuada felis vitae accumsan. Proin vel nisi vel orci bibendum facilisis sit amet vitae nibh. Fusce eros nisl, auctor et erat quis, malesuada accumsan ligula. Nullam gravida eu enim sed pellentesque. Phasellus tincidunt consequat elit. Integer et neque imperdiet, commodo lacus a, commodo tellus.' - export const Multiline: Story = () => ( <> = () => ( label="Multiline with rowsMax" multiline style={{ resize: 'none' }} - defaultValue={value} rows={3} - rowsMax={100} + rowsMax={10} /> ) diff --git a/libraries/core-react/src/hooks/useAutoResize.ts b/libraries/core-react/src/hooks/useAutoResize.ts index b65ce164bc..43f7d4a646 100644 --- a/libraries/core-react/src/hooks/useAutoResize.ts +++ b/libraries/core-react/src/hooks/useAutoResize.ts @@ -10,14 +10,14 @@ export const useAutoResize = ( const handleResize = () => { targetEl.style.height = 'auto' let newHeight = targetEl.clientHeight - if (!maxHeight || maxHeight > newHeight) { newHeight = Math.max(targetEl.scrollHeight, newHeight) if (maxHeight) { newHeight = Math.min(maxHeight, newHeight) if (targetEl.scrollHeight > maxHeight) { - console.log(targetEl.scrollHeight, newHeight, maxHeight) targetEl.style.overflow = 'auto' + } else { + targetEl.style.overflow = 'hidden' } } if (newHeight > targetEl.clientHeight) { From e123b075cc0f450e2a8f096de243eccf5952a19e Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 11:51:27 +0200 Subject: [PATCH 6/8] =?UTF-8?q?=E2=8F=AA=20Don't=20hide=20scrollbar=20on?= =?UTF-8?q?=20multilines=20without=20rowsMax..?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- libraries/core-react/src/components/Textarea/Textarea.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/libraries/core-react/src/components/Textarea/Textarea.tsx b/libraries/core-react/src/components/Textarea/Textarea.tsx index 5351337d6d..213801075a 100644 --- a/libraries/core-react/src/components/Textarea/Textarea.tsx +++ b/libraries/core-react/src/components/Textarea/Textarea.tsx @@ -70,7 +70,6 @@ const StyledTextarea = styled.textarea` appearance: none; background: ${input.background}; height: auto; - overflow: hidden; ${({ spacings }) => spacingsTemplate(spacings)} ${typographyTemplate(input.typography)} From 96c4c6a913610ac68661312d5dd789b624e8d43f Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 14:56:37 +0200 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=94=A5=20Remove=20unecessary=20check?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TextField/TextField.stories.tsx | 4 ++++ .../core-react/src/hooks/useAutoResize.ts | 21 +++++++++++-------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/libraries/core-react/src/components/TextField/TextField.stories.tsx b/libraries/core-react/src/components/TextField/TextField.stories.tsx index d60aab67a7..6974a8af4f 100644 --- a/libraries/core-react/src/components/TextField/TextField.stories.tsx +++ b/libraries/core-react/src/components/TextField/TextField.stories.tsx @@ -118,6 +118,9 @@ export const types: Story = () => ( types.storyName = 'Types of input fields' +const value = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus sit amet velit in tristique. Morbi ultrices arcu sit amet enim scelerisque euismod. Donec blandit malesuada felis vitae accumsan. Proin vel nisi vel orci bibendum facilisis sit amet vitae nibh. Fusce eros nisl, auctor et erat quis, malesuada accumsan ligula. Nullam gravida eu enim sed pellentesque. Phasellus tincidunt consequat elit. Integer et neque imperdiet, commodo lacus a, commodo tellus.' + export const Multiline: Story = () => ( <> = () => ( label="Multiline with rowsMax" multiline style={{ resize: 'none' }} + defaultValue={value} rows={3} rowsMax={10} /> diff --git a/libraries/core-react/src/hooks/useAutoResize.ts b/libraries/core-react/src/hooks/useAutoResize.ts index 43f7d4a646..bb7d74f8bb 100644 --- a/libraries/core-react/src/hooks/useAutoResize.ts +++ b/libraries/core-react/src/hooks/useAutoResize.ts @@ -10,16 +10,19 @@ export const useAutoResize = ( const handleResize = () => { targetEl.style.height = 'auto' let newHeight = targetEl.clientHeight - if (!maxHeight || maxHeight > newHeight) { - newHeight = Math.max(targetEl.scrollHeight, newHeight) - if (maxHeight) { - newHeight = Math.min(maxHeight, newHeight) - if (targetEl.scrollHeight > maxHeight) { - targetEl.style.overflow = 'auto' - } else { - targetEl.style.overflow = 'hidden' - } + + if (maxHeight > newHeight) { + newHeight = Math.min( + maxHeight, + Math.max(targetEl.scrollHeight, newHeight), + ) + + if (targetEl.scrollHeight > maxHeight) { + targetEl.style.overflow = 'auto' + } else { + targetEl.style.overflow = 'hidden' } + if (newHeight > targetEl.clientHeight) { targetEl.style.height = `${newHeight}px` } From 73033789db69fa5cca9f355bfbd997484ef9ad5e Mon Sep 17 00:00:00 2001 From: Frida Erdal Date: Tue, 25 May 2021 15:00:32 +0200 Subject: [PATCH 8/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Destructure=20values?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TextField/TextField.stories.tsx | 4 ---- libraries/core-react/src/hooks/useAutoResize.ts | 12 +++++------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/libraries/core-react/src/components/TextField/TextField.stories.tsx b/libraries/core-react/src/components/TextField/TextField.stories.tsx index 6974a8af4f..d60aab67a7 100644 --- a/libraries/core-react/src/components/TextField/TextField.stories.tsx +++ b/libraries/core-react/src/components/TextField/TextField.stories.tsx @@ -118,9 +118,6 @@ export const types: Story = () => ( types.storyName = 'Types of input fields' -const value = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus sit amet velit in tristique. Morbi ultrices arcu sit amet enim scelerisque euismod. Donec blandit malesuada felis vitae accumsan. Proin vel nisi vel orci bibendum facilisis sit amet vitae nibh. Fusce eros nisl, auctor et erat quis, malesuada accumsan ligula. Nullam gravida eu enim sed pellentesque. Phasellus tincidunt consequat elit. Integer et neque imperdiet, commodo lacus a, commodo tellus.' - export const Multiline: Story = () => ( <> = () => ( label="Multiline with rowsMax" multiline style={{ resize: 'none' }} - defaultValue={value} rows={3} rowsMax={10} /> diff --git a/libraries/core-react/src/hooks/useAutoResize.ts b/libraries/core-react/src/hooks/useAutoResize.ts index bb7d74f8bb..af6ba2b4cb 100644 --- a/libraries/core-react/src/hooks/useAutoResize.ts +++ b/libraries/core-react/src/hooks/useAutoResize.ts @@ -9,21 +9,19 @@ export const useAutoResize = ( useEffect(() => { const handleResize = () => { targetEl.style.height = 'auto' - let newHeight = targetEl.clientHeight + const { scrollHeight, clientHeight } = targetEl + let newHeight = clientHeight if (maxHeight > newHeight) { - newHeight = Math.min( - maxHeight, - Math.max(targetEl.scrollHeight, newHeight), - ) + newHeight = Math.min(maxHeight, Math.max(scrollHeight, newHeight)) - if (targetEl.scrollHeight > maxHeight) { + if (scrollHeight > maxHeight) { targetEl.style.overflow = 'auto' } else { targetEl.style.overflow = 'hidden' } - if (newHeight > targetEl.clientHeight) { + if (newHeight > clientHeight) { targetEl.style.height = `${newHeight}px` } }