fix: increase max height of open text question input to 8 lines

[ShubhamPalriwala]

What does this PR do?

Increases max height of input field to 8 lines for open text long answer questions! and after 8 lines, adds a scroll

One pointer is that it does for both In-App as well as Link Surveys!

Fixes # (issue)

How should this be tested?

• Test A
• Test B

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)		Feb 28, 2024 2:02pm
formbricks-com	⬜️ Ignored (Inspect)		Feb 28, 2024 2:02pm

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

packages/surveys/src/components/questions/OpenTextQuestion.tsx

Currently, the handleInputChange and handleInputResize functions are being created every time the component re-renders. This can lead to unnecessary re-renders and decrease the performance of the component. By using the useCallback hook, we can ensure that these functions are only re-created when their dependencies change, thus improving the performance of the component.
Create Issue
See the diff
Checkout the fix

    const handleInputChange = useCallback((inputValue: string) => {
      onChange({ [question.id]: inputValue });
    }, [onChange, question.id]);

    const handleInputResize = useCallback((event: { target: any }) => {
      let maxHeight = 160; // 8 lines
      const textarea = event.target;
      textarea.style.height = "auto";
      const newHeight = Math.min(textarea.scrollHeight, maxHeight);
      textarea.style.height = `${newHeight}px`;
      textarea.style.overflow = newHeight >= maxHeight ? "auto" : "hidden";
    }, []);

git fetch origin && git checkout -b ReviewBot/Impro-pchgn1f origin/ReviewBot/Impro-pchgn1f

Currently, the validation logic for the phone number is embedded within the JSX code. This can make the code harder to read and understand. By extracting this logic into a separate function, we can improve the readability of the code.
Create Issue
See the diff
Checkout the fix

    const getPattern = useCallback(() => {
      return question.inputType === "phone" ? "[+][0-9 ]+" : ".*";
    }, [question.inputType]);

    const getTitle = useCallback(() => {
      return question.inputType === "phone" ? "Please enter a valid phone number" : undefined;
    }, [question.inputType]);

git fetch origin && git checkout -b ReviewBot/Impro-7vt4kg4 origin/ReviewBot/Impro-7vt4kg4