Refactor Input with tags to display tags below

src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.module.scss

@@ -7,42 +7,21 @@
 @layer baklava.components {
   .bk-input-field-with-tags {
     @include bk.component-base(input-field-with-tags);
+  }
 
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding-bottom: 1px;
-    border-bottom: 1px solid bk.$theme-form-rule-default;
-
-    .bk-input-field-with-tags__label {
-      @include bk.font(bk.$font-family-body, bk.$font-weight-semibold);
-      cursor: default;
-    }
-
-    .bk-input-field-with-tags__control {
-      --empty: ; // Prevent empty class from being removed
-    }
-
-    &:focus-within {
-      border-bottom-color: bk.$theme-form-rule-focused;
+  .bk-input-field-with-tags__label {
+    @include bk.font(bk.$font-family-body, bk.$font-weight-semibold);
+    cursor: default;
+    margin-bottom: bk.$spacing-2;
+  }
 
-      input {
-        outline: none !important;
-      }
-    }
+  .bk-input-field-with-tags__control {
+    width: 100%;
   }
 
-  .bk-input-field-with-tags__container {
+  .bk-input-field-with-tags__tags {
     display: flex;
     flex-flow: row wrap;
     gap: bk.$spacing-2;
   }
-
-  .bk-input-field-with-tags__input-container {
-    flex-grow: 1;
-
-    input {
-      width: 100%;
-    }
-  }
 }

src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.stories.tsx

@@ -49,15 +49,19 @@ export const InputWithTags: Story = {
     };
 
     return (
-      <Card>
-        <InputFieldWithTags
-          tags={tags}
-          value={inputText}
-          onUpdate={handleUpdate}
-          onUpdateTags={handleUpdateTags}
-          placeholder=""
-        />
-      </Card>
+      <div>
+        <p>Enter creates new tags; backspace removes tags.</p>
+        <Card style={{width: '350px'}}>
+          <InputFieldWithTags
+            tags={tags}
+            value={inputText}
+            label={'Input with tags'}
+            onUpdate={handleUpdate}
+            onUpdateTags={handleUpdateTags}
+            placeholder="Placeholder"
+          />
+        </Card>
+      </div>
     );
   }
 };

src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.tsx

@@ -57,6 +57,7 @@ export const InputFieldWithTags = (props: InputFieldWithTagsProps) => {
 
   const controlId = React.useId();
   const formContext = useFormContext();
+  const inputRef = React.useRef<React.ComponentRef<'input'>>(null);
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     // first handle supplied onChange, if exists
@@ -80,6 +81,7 @@ export const InputFieldWithTags = (props: InputFieldWithTagsProps) => {
         onUpdateTags(tags.slice(0,-1));
       }
       if (e.key === 'Enter' && value !== '') {
+        e.preventDefault();
         onUpdateTags([...tags, value.trim()]);
         onUpdate('');
       }
@@ -89,6 +91,8 @@ export const InputFieldWithTags = (props: InputFieldWithTagsProps) => {
   const onRemoveTag = (index: number) => {
     if (onUpdateTags) {
       onUpdateTags(tags.filter((_, idx) => idx !== index));
+      const inputEl = inputRef.current;
+      inputEl?.focus();
     }
   };
 
@@ -110,23 +114,21 @@ export const InputFieldWithTags = (props: InputFieldWithTagsProps) => {
           {label}
         </label>
       }
-      <div className={cl['bk-input-field-with-tags__container']}>
+      <Input
+        {...inputProps}
+        id={controlId}
+        form={formContext.formId}
+        className={cx(cl['bk-input-field-with-tags__control'], inputProps.className)}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        value={value}
+        ref={inputRef}
+      />
+      <div className={cl['bk-input-field-with-tags__tags']}>
         {tags && (
           // biome-ignore lint/suspicious/noArrayIndexKey: no other unique identifier available
           tags.map((tag, idx) => <Tag key={idx} content={tag} onRemove={() => onRemoveTag(idx)}/>)
         )}
-        <div className={cl['bk-input-field-with-tags__input-container']}>
-          <Input
-            {...inputProps}
-            unstyled={true}
-            id={controlId}
-            form={formContext.formId}
-            className={cx(cl['bk-input-field-with-tags__control'], inputProps.className)}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            value={value}
-          />
-        </div>
       </div>
     </div>
   );

src/components/text/Tag/Tag.module.scss

@@ -15,6 +15,7 @@
     align-items: center;
     font-size: bk.$font-size-xs;
     padding: bk.$size-2 bk.$spacing-2 bk.$size-3;
+    flex-shrink: 0;
 
     &.bk-tag--with-close-button {
       padding-right: 0;

src/components/text/Tag/Tag.tsx

@@ -5,6 +5,7 @@
 import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
 import * as React from 'react';
 
+import { Button } from '../../actions/Button/Button.tsx';
 import { Icon } from '../../graphics/Icon/Icon.tsx';
 
 import cl from './Tag.module.scss';
@@ -46,7 +47,9 @@ export const Tag = (props: TagProps) => {
     >
       {content}
       {onRemove && (
-        <Icon icon="cross" className={cl['bk-tag__icon']} onClick={onRemove}/>
+        <Button unstyled onPress={onRemove}>
+          <Icon icon="cross" className={cl['bk-tag__icon']}/>
+        </Button>
       )}
     </div>
   );