Update limits for GroupDescriptionInput

ts/components/Input.tsx

@@ -16,15 +16,18 @@ import * as grapheme from '../util/grapheme';
 import { LocalizerType } from '../types/Util';
 import { getClassNamesFor } from '../util/getClassNamesFor';
 import { refMerger } from '../util/refMerger';
+import { byteLength } from '../Bytes';
 
 export type PropsType = {
   countLength?: (value: string) => number;
+  countBytes?: (value: string) => number;
   disabled?: boolean;
   expandable?: boolean;
   hasClearButton?: boolean;
   i18n: LocalizerType;
   icon?: ReactNode;
   maxLengthCount?: number;
+  maxByteCount?: number;
   moduleClassName?: string;
   onChange: (value: string) => unknown;
   placeholder: string;
@@ -56,12 +59,14 @@ export const Input = forwardRef<
   (
     {
       countLength = grapheme.count,
+      countBytes = byteLength,
       disabled,
       expandable,
       hasClearButton,
       i18n,
       icon,
       maxLengthCount = 0,
+      maxByteCount = 0,
       moduleClassName,
       onChange,
       placeholder,
@@ -114,8 +119,9 @@ export const Input = forwardRef<
       const newValue = inputEl.value;
 
       const newLengthCount = maxLengthCount ? countLength(newValue) : 0;
+      const newByteCount = maxByteCount ? countBytes(newValue) : 0;
 
-      if (newLengthCount <= maxLengthCount) {
+      if (newLengthCount <= maxLengthCount && newByteCount <= maxByteCount) {
         onChange(newValue);
       } else {
         inputEl.value = valueOnKeydownRef.current;
@@ -124,12 +130,19 @@ export const Input = forwardRef<
       }
 
       maybeSetLarge();
-    }, [countLength, maxLengthCount, maybeSetLarge, onChange]);
+    }, [
+      countLength,
+      countBytes,
+      maxLengthCount,
+      maxByteCount,
+      maybeSetLarge,
+      onChange,
+    ]);
 
     const handlePaste = useCallback(
       (event: ClipboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const inputEl = innerRef.current;
-        if (!inputEl || !maxLengthCount) {
+        if (!inputEl || !maxLengthCount || !maxByteCount) {
           return;
         }
 
@@ -145,14 +158,25 @@ export const Input = forwardRef<
           countLength(textBeforeSelection) +
           countLength(pastedText) +
           countLength(textAfterSelection);
+        const newByteCount =
+          countBytes(textBeforeSelection) +
+          countBytes(pastedText) +
+          countBytes(textAfterSelection);
 
-        if (newLengthCount > maxLengthCount) {
+        if (newLengthCount > maxLengthCount || newByteCount > maxByteCount) {
           event.preventDefault();
         }
 
         maybeSetLarge();
       },
-      [countLength, maxLengthCount, maybeSetLarge, value]
+      [
+        countLength,
+        countBytes,
+        maxLengthCount,
+        maxByteCount,
+        maybeSetLarge,
+        value,
+      ]
     );
 
     useEffect(() => {