refactor(console): improve invitation email input field (#5615)

packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.module.scss

@@ -4,8 +4,8 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  min-height: 96px;
+  min-height: 102px;
-  padding: 0 _.unit(2) 0 _.unit(3);
+  padding: _.unit(1.5) _.unit(3);
   background: var(--color-layer-1);
   border: 1px solid var(--color-border);
   border-radius: 8px;
@@ -17,11 +17,12 @@
   cursor: pointer;
   position: relative;
 
-  &.multiple {
+  .wrapper {
+    display: flex;
+    align-items: center;
     justify-content: flex-start;
     flex-wrap: wrap;
     gap: _.unit(2);
-    padding: _.unit(1.5) _.unit(3);
     cursor: text;
 
     .tag {
@@ -58,8 +59,7 @@
       color: var(--color-text);
       font: var(--font-body-2);
       background: transparent;
-      flex-grow: 1;
+      flex: 1;
-      padding: _.unit(0.5);
 
       &::placeholder {
         color: var(--color-placeholder);
@@ -81,6 +81,10 @@
   }
 }
 
+canvas {
+  display: none;
+}
+
 .errorMessage {
   font: var(--font-body-2);
   color: var(--color-error);

packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.tsx

@@ -2,7 +2,7 @@ import { emailRegEx } from '@logto/core-kit';
 import { generateStandardShortId } from '@logto/shared/universal';
 import { conditional, type Nullable } from '@silverhand/essentials';
 import classNames from 'classnames';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import Close from '@/assets/icons/close.svg';
@@ -23,6 +23,13 @@ type Props = {
   placeholder?: string;
 };
 
+/**
+ * The body-2 font declared in @logto/core-kit/scss/fonts. It is referenced here to calculate
+ * the width of the input text, which determines the minimum width of the input field.
+ */
+const fontBody2 =
+  '400 14px / 20px -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji';
+
 function InviteEmailsInput({
   className,
   values,
@@ -35,6 +42,18 @@ function InviteEmailsInput({
   const [currentValue, setCurrentValue] = useState('');
   const { setError, clearErrors } = useFormContext<InviteMemberForm>();
   const { parseEmailOptions } = useEmailInputUtils();
+  const [minInputWidth, setMinInputWidth] = useState<number>(0);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    // Render placeholder text in canvas to calculate its width in CSS pixels.
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    ctx.font = fontBody2;
+    setMinInputWidth(ctx.measureText(currentValue).width);
+  }, [currentValue]);
 
   const onChange = (values: InviteeEmailItem[]) => {
     const { values: parsedValues, errorMessage } = parseEmailOptions(values);
@@ -67,12 +86,7 @@ function InviteEmailsInput({
   return (
     <>
       <div
-        className={classNames(
+        className={classNames(styles.input, Boolean(error) && styles.error, className)}
-          styles.input,
-          styles.multiple,
-          Boolean(error) && styles.error,
-          className
-        )}
         role="button"
         tabIndex={0}
         onKeyDown={onKeyDownHandler(() => {
@@ -82,6 +96,7 @@ function InviteEmailsInput({
           ref.current?.focus();
         }}
       >
+        <div className={styles.wrapper}>
           {values.map((option) => (
             <Tag
               key={option.id}
@@ -114,6 +129,7 @@ function InviteEmailsInput({
             ref={ref}
             placeholder={conditional(values.length === 0 && placeholder)}
             value={currentValue}
+            style={{ minWidth: `${minInputWidth}px` }}
             onKeyDown={(event) => {
               if (event.key === 'Backspace' && currentValue === '') {
                 if (focusedValueId) {
@@ -148,9 +164,11 @@ function InviteEmailsInput({
             }}
           />
         </div>
+      </div>
       {Boolean(error) && typeof error === 'string' && (
         <div className={styles.errorMessage}>{error}</div>
       )}
+      <canvas ref={canvasRef} />
     </>
   );
 }