Compose form design changes

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -22,9 +22,10 @@ interface IDropdownMenuItem {
   index: number;
   item: MenuItem | null;
   onClick?(): void;
+  autoFocus?: boolean;
 }
 
-const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
+const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem) => {
   const history = useHistory();
 
   const itemRef = useRef<HTMLAnchorElement>(null);
@@ -63,7 +64,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
   useEffect(() => {
     const firstItem = index === 0;
 
-    if (itemRef.current && firstItem) {
+    if (itemRef.current && (autoFocus ? firstItem : item?.active)) {
       itemRef.current.focus({ preventScroll: true });
     }
   }, [itemRef.current, index]);

src/components/dropdown-menu/dropdown-menu.tsx

@@ -262,6 +262,8 @@ const DropdownMenu = (props: IDropdownMenu) => {
     return null;
   }
 
+  const autoFocus = !items.some((item) => item?.active);
+
   return (
     <>
       {children ? (
@@ -309,6 +311,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
                   item={item}
                   index={idx}
                   onClick={handleClose}
+                  autoFocus={autoFocus}
                 />
               ))}
             </ul>