Merge pull request #69 from JorgeRojo/develop

v1.1.86

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fratch-ui",
-  "version": "1.1.85",
+  "version": "1.1.86",
   "repository": {
     "type": "git",
     "url": "https://github.com/JorgeRojo/fratch-ui.git"

src/components/Form/Select/Select.tsx

@@ -172,9 +172,7 @@ function useKeyboardNavigation<T>({
         setVisible(false);
       }
     } else {
-      if (event.code === 'Enter' || event.code === 'ArrowDown') {
-        handleOnInputClick(event as any);
-      }
+      handleOnInputClick(event as any);
     }
   };
 

src/components/Form/Select/__stories__/FocusFromButton.stories.tsx

@@ -0,0 +1,46 @@
+import { useRef } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../../..';
+import Select from '../Select';
+
+const SelectFocusFromButton = (): JSX.Element => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const options = Array.from(Array(25).keys()).map(index => ({
+    label: `Option ${index + 1} -  label`,
+    value: {
+      opt: `opt-${index + 1}`,
+      prop: `prop-${index}`,
+    },
+  }));
+
+  const handleClick = (): void => {
+    ref.current?.focus();
+  };
+
+  return (
+    <>
+      <Button onClick={handleClick} size="small" type="primary">
+        Focus
+      </Button>
+      <br />
+      <br />
+      <Select triggerElementRef={ref} options={options} searchable />
+    </>
+  );
+};
+
+const meta = {
+  title: 'Example/Form/Select/Focus from button',
+  component: SelectFocusFromButton,
+  tags: ['autodocs'],
+} satisfies Meta<typeof SelectFocusFromButton>;
+
+export default meta;
+type Story = StoryObj<typeof SelectFocusFromButton>;
+
+export const Docs: Story = {
+  args: {},
+};

src/components/Form/Select/__stories__/Select.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { IconCheck } from '../../../Icons/Icons';
 import Select from '../Select';
 
 type TesOptionValue = { opt: string; prop: string };
@@ -39,3 +40,27 @@ export const Default: Story = {
     ),
   },
 };
+
+export const CustomLabelOptions: Story = {
+  args: {
+    cleanable: true,
+    searchable: true,
+    disabled: false,
+    placeholder: 'Select an option...',
+    value: { opt: 'opt-3', prop: 'prop-3' },
+    options: Array.from(Array(10).keys()).map(i => ({
+      label: `Option ${i + 1} label`,
+      labelElement: (
+        <>
+          <IconCheck /> Option <b>{i + 1}</b> <i>component</i> label
+        </>
+      ),
+      value: { opt: `opt-${i + 1}`, prop: `prop-${i + 1}` },
+    })),
+    noResultsElement: (
+      <div style={{ padding: '8px 16px', fontSize: '25px' }}>
+        No results found...
+      </div>
+    ),
+  },
+};