feature(react-tag-picker): support TagPicker usage without TagPickerList

change/@fluentui-react-tag-picker-87e138fe-62c9-4889-8ff8-a472ae227f11.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support TagPicker usage without TagPickerList",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts

@@ -126,7 +126,7 @@ const childrenToTriggerAndPopover = (children?: React.ReactNode) => {
     trigger = childrenArray[0];
     popover = childrenArray[1];
   } else if (childrenArray.length === 1) {
-    popover = childrenArray[0];
+    trigger = childrenArray[0];
   }
   return { trigger, popover };
 };

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerOnlyInput.stories.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+  TagPicker,
+  TagPickerInput,
+  TagPickerControl,
+  TagPickerProps,
+  TagPickerGroup,
+} from '@fluentui/react-components';
+import { Tag, Avatar, Field } from '@fluentui/react-components';
+
+export const OnlyInput = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);
+
+  const onOptionSelect: TagPickerProps['onOptionSelect'] = (_, data) => {
+    setSelectedOptions(data.selectedOptions);
+  };
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.currentTarget.value);
+  };
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && inputValue) {
+      setInputValue('');
+      setSelectedOptions(curr => [...curr, inputValue]);
+    }
+  };
+
+  const [inputValue, setInputValue] = React.useState('');
+
+  return (
+    <Field label="Add Employees" style={{ maxWidth: 400 }}>
+      <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
+        <TagPickerControl expandIcon={null}>
+          <TagPickerGroup>
+            {selectedOptions.map((option, index) => (
+              <Tag
+                key={index}
+                shape="rounded"
+                media={<Avatar aria-hidden name={option} color="colorful" />}
+                value={option}
+              >
+                {option}
+              </Tag>
+            ))}
+          </TagPickerGroup>
+          <TagPickerInput
+            value={inputValue}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            aria-label="Add Employees"
+          />
+        </TagPickerControl>
+      </TagPicker>
+    </Field>
+  );
+};
+
+OnlyInput.parameters = {
+  docs: {
+    description: {
+      story: `
+You can use the \`TagPicker\` without the list of options. This is useful when you want to allow users to input their own tags. All you have to do is control the \`TagPickerInput\` value and handle the \`onKeyDown\` event to add the tag to the \`TagPicker\` when the user presses the Enter key.
+      `,
+    },
+  },
+};

packages/react-components/react-tag-picker/stories/src/TagPicker/index.stories.tsx

@@ -23,6 +23,7 @@ export { SecondaryAction } from './TagPickerSecondaryAction.stories';
 export { Grouped } from './TagPickerGrouped.stories';
 export { TruncatedText } from './TagPickerTruncatedText.stories';
 export { SingleSelect } from './TagPickerSingleSelect.stories';
+export { OnlyInput } from './TagPickerOnlyInput.stories';
 
 export default {
   title: 'Components/TagPicker',