Skip to content

Commit

Permalink
[GEN-1796]: fix padding for text-area (#1844)
Browse files Browse the repository at this point in the history
  • Loading branch information
BenElferink authored Nov 25, 2024
1 parent c0939f7 commit 92b3456
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export function useDestinationFormData(params?: { destinationType?: string; supp
}, [supportedSignals]);

function handleFormChange(key: keyof typeof INITIAL | string, val: any) {
// this is for a case where "exportedSignals" have been changed, it's an object so they children are targeted as: "exportedSignals.logs"
const [parentKey, childKey] = key.split('.');

if (!!childKey) {
Expand Down
19 changes: 12 additions & 7 deletions frontend/webapp/reuseable-components/textarea/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const StyledTextArea = styled.textarea`
background: none;
color: ${({ theme }) => theme.colors.text};
font-size: 14px;
padding: 12px 20px;
padding: 12px 20px 0;
font-family: ${({ theme }) => theme.font_family.primary};
font-weight: 300;
line-height: 22px;
Expand Down Expand Up @@ -96,20 +96,25 @@ const ErrorMessage = styled(Text)`
const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, required, onChange, ...props }) => {
const ref = useRef<HTMLTextAreaElement>(null);

const resize = () => {
// this is to auto-resize the textarea according to the number of rows typed
if (ref.current) {
ref.current.style.height = 'auto';
ref.current.style.height = `${ref.current.scrollHeight}px`;
}
};

return (
<Container>
<FieldLabel title={title} required={required} tooltip={tooltip} />

<InputWrapper $disabled={props.disabled} $hasError={!!errorMessage} $isActive={!!props.autoFocus}>
<StyledTextArea
ref={ref}
onFocus={resize}
onBlur={resize}
onChange={(e) => {
if (ref.current) {
// The following auto-resizes the textarea to the number of rows typed
ref.current.style.height = 'auto';
ref.current.style.height = `${ref.current.scrollHeight}px`;
}

resize();
onChange?.(e);
}}
{...props}
Expand Down

0 comments on commit 92b3456

Please sign in to comment.