From 834c053f2729acfe7ed466a5c7386da9a7462f85 Mon Sep 17 00:00:00 2001
From: Rajeev K Tomy <rajeevphpdeveloper@gmail.com>
Date: Mon, 9 Feb 2026 13:06:18 +0100
Subject: [PATCH 1/6] #14 Category selection input implementation

---
 Data/CategoryTreeNode.php                     |  33 ++
 Form/Field/FieldType/CategorySelection.php    |  71 ++++
 .../CategoryTreeCacheKeyGenerator.php         |  36 ++
 .../CategoryFilterService.php                 |  63 +++
 .../CategorySelection/CategoryTreeBuilder.php | 240 ++++++++++++
 .../CategoryTreeRenderer.php                  |  61 +++
 etc/di.xml                                    |   1 +
 .../form/field_type/category_selection.phtml  | 370 ++++++++++++++++++
 .../category_selection/crumbs.phtml           |  57 +++
 .../category_selection/search_input.phtml     | 163 ++++++++
 .../select_inner_item.phtml                   |  55 +++
 11 files changed, 1150 insertions(+)
 create mode 100644 Data/CategoryTreeNode.php
 create mode 100644 Form/Field/FieldType/CategorySelection.php
 create mode 100644 Model/CategorySelection/CategoryTreeCacheKeyGenerator.php
 create mode 100644 Service/CategorySelection/CategoryFilterService.php
 create mode 100644 Service/CategorySelection/CategoryTreeBuilder.php
 create mode 100644 Service/CategorySelection/CategoryTreeRenderer.php
 create mode 100644 view/adminhtml/templates/form/field_type/category_selection.phtml
 create mode 100644 view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml
 create mode 100644 view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
 create mode 100644 view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml

diff --git a/Data/CategoryTreeNode.php b/Data/CategoryTreeNode.php
new file mode 100644
index 0000000..376a485
--- /dev/null
+++ b/Data/CategoryTreeNode.php
@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Data;
+
+class CategoryTreeNode
+{
+    public function __construct(
+        public readonly int $id,
+        public readonly string $label,
+        public readonly bool $isActive,
+        public readonly int $level,
+        public readonly ?int $parentId = null,
+        public readonly array $parentIds = [],
+        public readonly array $children = [],
+    ) {
+    }
+
+    public function toUiArray(): array
+    {
+        return array_merge(
+            get_object_vars($this),
+            [
+                'hasChildren' => $this->children !== [],
+                'expanded' => $this->level === 0,
+                'hovered' => false,
+                'parentsPath' => null,
+            ]
+        );
+    }
+}
+
diff --git a/Form/Field/FieldType/CategorySelection.php b/Form/Field/FieldType/CategorySelection.php
new file mode 100644
index 0000000..0b99efc
--- /dev/null
+++ b/Form/Field/FieldType/CategorySelection.php
@@ -0,0 +1,71 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Form\Field\FieldType;
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\Service\CategorySelection\CategoryTreeBuilder;
+use Loki\AdminComponents\Service\CategorySelection\CategoryTreeRenderer;
+use Loki\AdminComponents\Form\Field\Field;
+use Loki\AdminComponents\Form\Field\FieldType\FieldTypeAbstract;
+use Magento\Framework\Serialize\SerializerInterface;
+
+class CategorySelection extends FieldTypeAbstract
+{
+    public function __construct(
+        private readonly CategoryTreeBuilder $categoryTreeBuilder,
+        private readonly CategoryTreeRenderer $categoryTreeRenderer,
+        private readonly SerializerInterface $serializer,
+    ) {
+    }
+
+    public function getTemplate(): string
+    {
+        return 'Loki_AdminComponents::form/field_type/category_selection.phtml';
+    }
+
+    public function getCategoryNodeJson(CategoryTreeNode $treeNode): string
+    {
+        return $this->serializer->serialize($treeNode->toUiArray());
+    }
+
+    /**
+     * @param CategoryTreeNode[] $categoryTreeNodes
+     */
+    public function getMaxCategoryLevel(array $categoryTreeNodes): int
+    {
+        return $this->categoryTreeBuilder->calculateMaxLevel($categoryTreeNodes);
+    }
+
+    public function renderChildCategoryNode(CategoryTreeNode $categoryTreeNode, Field $field): string
+    {
+        return $this->categoryTreeRenderer->renderChildNode($categoryTreeNode, $field);
+    }
+
+    public function renderCategoriesBreadcrumb(): string
+    {
+        return $this->categoryTreeRenderer->renderBreadcrumb();
+    }
+
+    public function renderSearchInput(): string
+    {
+        return $this->categoryTreeRenderer->renderSearchInput();
+    }
+
+    public function getHoverSequenceJson(): string
+    {
+        $categoryTree = $this->getCategoryTree();
+        $hoverSequence = $this->categoryTreeBuilder->buildHoverSequence($categoryTree);
+
+        return $this->serializer->serialize($hoverSequence);
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    public function getCategoryTree(int $storeId = 0, ?string $filter = null): array
+    {
+        return $this->categoryTreeBuilder->build($storeId, $filter);
+    }
+}
diff --git a/Model/CategorySelection/CategoryTreeCacheKeyGenerator.php b/Model/CategorySelection/CategoryTreeCacheKeyGenerator.php
new file mode 100644
index 0000000..593fa0d
--- /dev/null
+++ b/Model/CategorySelection/CategoryTreeCacheKeyGenerator.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Model\CategorySelection;
+
+use Magento\Backend\Model\Auth\Session;
+
+class CategoryTreeCacheKeyGenerator
+{
+    public const CACHE_TAG_PREFIX = 'loki_admin_components_form_category_tree';
+
+    public function __construct(
+        private readonly Session $authSession,
+    ) {
+    }
+
+    public function generate(int $storeId, ?string $filter): string
+    {
+        $parts = [
+            self::CACHE_TAG_PREFIX,
+            (string) $storeId,
+            $this->getUserRole(),
+            $filter ?? '',
+        ];
+
+        return implode('_', array_filter($parts));
+    }
+
+    private function getUserRole(): string
+    {
+        $user = $this->authSession->getUser();
+
+        return (string)$user?->getAclRole();
+    }
+}
diff --git a/Service/CategorySelection/CategoryFilterService.php b/Service/CategorySelection/CategoryFilterService.php
new file mode 100644
index 0000000..60920ed
--- /dev/null
+++ b/Service/CategorySelection/CategoryFilterService.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Service\CategorySelection;
+
+use Magento\Catalog\Model\Category;
+use Magento\Catalog\Model\ResourceModel\Category\Collection;
+use Magento\Catalog\Model\ResourceModel\Category\CollectionFactory;
+use Magento\Framework\DB\Helper as DbHelper;
+
+class CategoryFilterService
+{
+    public function __construct(
+        private readonly CollectionFactory $categoryCollectionFactory,
+        private readonly DbHelper $dbHelper,
+    ) {
+    }
+
+    /**
+     * @return int[]
+     */
+    public function getVisibleCategoryIds(int $storeId, ?string $filter): array
+    {
+        $collection = $this->createFilteredCollection($storeId, $filter);
+
+        return $this->extractCategoryIdsWithAncestors($collection);
+    }
+
+    private function createFilteredCollection(int $storeId, ?string $filter): Collection
+    {
+        $collection = $this->categoryCollectionFactory->create();
+        $collection->addAttributeToSelect('path')
+            ->addAttributeToFilter('entity_id', ['neq' => Category::TREE_ROOT_ID])
+            ->setStoreId($storeId);
+
+        if (!empty($filter)) {
+            $collection->addAttributeToFilter(
+                'name',
+                ['like' => $this->dbHelper->addLikeEscape($filter, ['position' => 'any'])]
+            );
+        }
+
+        return $collection;
+    }
+
+    /**
+     * @return int[]
+     */
+    private function extractCategoryIdsWithAncestors(Collection $collection): array
+    {
+        $categoryIds = [];
+
+        foreach ($collection as $category) {
+            $path = $category->getPath() ?? '';
+            foreach (explode('/', $path) as $ancestorId) {
+                $categoryIds[(int) $ancestorId] = true;
+            }
+        }
+
+        return array_keys($categoryIds);
+    }
+}
diff --git a/Service/CategorySelection/CategoryTreeBuilder.php b/Service/CategorySelection/CategoryTreeBuilder.php
new file mode 100644
index 0000000..d7b2898
--- /dev/null
+++ b/Service/CategorySelection/CategoryTreeBuilder.php
@@ -0,0 +1,240 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Service\CategorySelection;
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\Model\CategorySelection\CategoryTreeCacheKeyGenerator;
+use Magento\Catalog\Model\Category;
+use Magento\Catalog\Model\ResourceModel\Category\Collection;
+use Magento\Catalog\Model\ResourceModel\Category\CollectionFactory;
+use Magento\Framework\App\Cache\Type\Block;
+use Magento\Framework\App\CacheInterface;
+use Magento\Framework\Serialize\SerializerInterface;
+
+class CategoryTreeBuilder
+{
+    public function __construct(
+        private readonly CollectionFactory $categoryCollectionFactory,
+        private readonly CategoryFilterService $categoryFilterService,
+        private readonly CacheInterface $cache,
+        private readonly SerializerInterface $serializer,
+        private readonly CategoryTreeCacheKeyGenerator $cacheKeyGenerator,
+    ) {
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    public function build(int $storeId = 0, ?string $filter = null): array
+    {
+        $cacheKey = $this->cacheKeyGenerator->generate($storeId, $filter);
+        $cachedData = $this->cache->load($cacheKey);
+
+        if ($cachedData !== false) {
+            return $this->deserializeCategoryTree($cachedData);
+        }
+
+        $tree = $this->buildFreshTree($storeId, $filter);
+
+        $this->cacheTree($cacheKey, $tree);
+
+        return $tree;
+    }
+
+    /**
+     * @param CategoryTreeNode[] $treeNodes
+     */
+    public function calculateMaxLevel(array $treeNodes): int
+    {
+        $maxLevel = 0;
+
+        foreach ($treeNodes as $node) {
+            $maxLevel = max($maxLevel, $node->level);
+
+            if ($node->children !== []) {
+                $maxLevel = max($maxLevel, $this->calculateMaxLevel($node->children));
+            }
+        }
+
+        return $maxLevel;
+    }
+
+    /**
+     * @param CategoryTreeNode[] $treeNodes
+     * @return int[]
+     */
+    public function buildHoverSequence(array $treeNodes): array
+    {
+        $sequence = [];
+
+        foreach ($treeNodes as $node) {
+            $sequence[] = $node->id;
+            $sequence = [
+                ...$sequence,
+                ...$this->buildHoverSequence($node->children)
+            ];
+        }
+
+        return $sequence;
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    private function buildFreshTree(int $storeId, ?string $filter): array
+    {
+        $visibleCategoryIds = $this->categoryFilterService->getVisibleCategoryIds($storeId, $filter);
+
+        if ($visibleCategoryIds === []) {
+            return [];
+        }
+
+        $flatCategories = $this->loadFlatCategories($storeId, $visibleCategoryIds);
+
+        return $this->buildTreeStructure($flatCategories);
+    }
+
+    /**
+     * @param int[] $categoryIds
+     * @return array<int, array{id: int, label: string, is_active: bool, parent_id: int}>
+     */
+    private function loadFlatCategories(int $storeId, array $categoryIds): array
+    {
+        $collection = $this->categoryCollectionFactory->create();
+        $collection->addAttributeToSelect(['name', 'is_active', 'parent_id'])
+            ->addAttributeToFilter('entity_id', ['in' => $categoryIds])
+            ->setStoreId($storeId);
+
+        return $this->convertCollectionToFlatArray($collection);
+    }
+
+    /**
+     * @return array<int, array{id: int, label: string, is_active: bool, parent_id: int}>
+     */
+    private function convertCollectionToFlatArray(Collection $collection): array
+    {
+        $flat = [];
+
+        foreach ($collection as $category) {
+            $flat[(int) $category->getId()] = [
+                'id' => (int) $category->getId(),
+                'label' => (string) $category->getName(),
+                'is_active' => (bool) $category->getIsActive(),
+                'parent_id' => (int) $category->getParentId(),
+            ];
+        }
+
+        return $flat;
+    }
+
+    /**
+     * @param array<int, array{id: int, label: string, is_active: bool, parent_id: int}> $flatCategories
+     * @return CategoryTreeNode[]
+     */
+    private function buildTreeStructure(array $flatCategories): array
+    {
+        return $this->buildTreeRecursive(
+            $flatCategories,
+            Category::TREE_ROOT_ID,
+            0,
+            []
+        );
+    }
+
+    /**
+     * @param array<int, array{id: int, label: string, is_active: bool, parent_id: int}> $flatCategories
+     * @param int[] $ancestorIds
+     * @return CategoryTreeNode[]
+     */
+    private function buildTreeRecursive(
+        array $flatCategories,
+        int $parentId,
+        int $level,
+        array $ancestorIds
+    ): array {
+        $nodes = [];
+
+        foreach ($flatCategories as $category) {
+            if ($category['parent_id'] !== $parentId) {
+                continue;
+            }
+
+            $currentAncestorIds = $this->buildAncestorIds($ancestorIds, $parentId);
+
+            $children = $this->buildTreeRecursive(
+                $flatCategories,
+                $category['id'],
+                $level + 1,
+                $currentAncestorIds
+            );
+
+            $nodes[] = new CategoryTreeNode(
+                id: $category['id'],
+                label: $category['label'],
+                isActive: $category['is_active'],
+                level: $level,
+                parentId: $parentId,
+                parentIds: $currentAncestorIds,
+                children: $children
+            );
+        }
+
+        return $nodes;
+    }
+
+    /**
+     * @param int[] $ancestorIds
+     * @return int[]
+     */
+    private function buildAncestorIds(array $ancestorIds, int $parentId): array
+    {
+        if ($parentId === Category::TREE_ROOT_ID) {
+            return $ancestorIds;
+        }
+
+        return [...$ancestorIds, $parentId];
+    }
+
+    /**
+     * @param CategoryTreeNode[] $tree
+     */
+    private function cacheTree(string $cacheKey, array $tree): void
+    {
+        $this->cache->save(
+            $this->serializer->serialize($tree),
+            $cacheKey,
+            [Category::CACHE_TAG, Block::CACHE_TAG]
+        );
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    private function deserializeCategoryTree(string $cachedData): array
+    {
+        $treeData = $this->serializer->unserialize($cachedData);
+
+        return $this->convertArrayToTreeNodes($treeData);
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    private function convertArrayToTreeNodes(array $treeData): array
+    {
+        return array_map(fn (array $nodeData) =>
+            new CategoryTreeNode(
+                    id: $nodeData['id'],
+                    label: $nodeData['label'],
+                    isActive: $nodeData['isActive'],
+                    level: $nodeData['level'],
+                    parentId: $nodeData['parentId'],
+                    parentIds: $nodeData['parentIds'],
+                    children: $this->convertArrayToTreeNodes($nodeData['children'] ?? [])
+            ),
+            $treeData
+        );
+    }
+}
diff --git a/Service/CategorySelection/CategoryTreeRenderer.php b/Service/CategorySelection/CategoryTreeRenderer.php
new file mode 100644
index 0000000..8b71f53
--- /dev/null
+++ b/Service/CategorySelection/CategoryTreeRenderer.php
@@ -0,0 +1,61 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Service\CategorySelection;
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\Form\Field\Field;
+use Magento\Framework\View\Element\Template;
+use Magento\Framework\View\LayoutInterface;
+
+class CategoryTreeRenderer
+{
+    private const TEMPLATE_CHILD_ITEM =
+        'Loki_AdminComponents::form/field_type/category_selection/select_inner_item.phtml';
+    private const TEMPLATE_BREADCRUMB = 'Loki_AdminComponents::form/field_type/category_selection/crumbs.phtml';
+    private const TEMPLATE_SEARCH = 'Loki_AdminComponents::form/field_type/category_selection/search_input.phtml';
+
+    public function __construct(
+        private readonly LayoutInterface $layout,
+    ) {
+    }
+
+    public function renderChildNode(CategoryTreeNode $categoryTreeNode, Field $field): string
+    {
+        return $this->layout->createBlock(Template::class, 'category_selection_inner_item_' . $categoryTreeNode->id)
+            ->setData('category_tree_node', $categoryTreeNode)
+            ->setData('field', $field)
+            ->setTemplate($this->getChildItemTemplate())
+            ->toHtml();
+    }
+
+    public function renderBreadcrumb(): string
+    {
+        return $this->layout->createBlock(Template::class, 'categories_selection_crumbs')
+            ->setTemplate($this->getBreadcrumbsTemplate())
+            ->toHtml();
+    }
+
+    public function renderSearchInput(): string
+    {
+        return $this->layout->createBlock(Template::class, 'category_selection_search_input')
+            ->setTemplate($this->getSearchInputTemplate())
+            ->toHtml();
+    }
+
+    private function getChildItemTemplate(): string
+    {
+        return self::TEMPLATE_CHILD_ITEM;
+    }
+
+    private function getBreadcrumbsTemplate(): string
+    {
+        return self::TEMPLATE_BREADCRUMB;
+    }
+
+    private function getSearchInputTemplate(): string
+    {
+        return self::TEMPLATE_SEARCH;
+    }
+}
diff --git a/etc/di.xml b/etc/di.xml
index 32c8ca1..095a9c4 100644
--- a/etc/di.xml
+++ b/etc/di.xml
@@ -44,6 +44,7 @@
                 <item name="product_select" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\ProductSelect</item>
                 <item name="customer_select" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\CustomerSelect</item>
                 <item name="entity_select" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\EntitySelect</item>
+                <item name="category_selection" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\CategorySelection</item>
             </argument>
         </arguments>
     </type>
diff --git a/view/adminhtml/templates/form/field_type/category_selection.phtml b/view/adminhtml/templates/form/field_type/category_selection.phtml
new file mode 100644
index 0000000..d20306e
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection.phtml
@@ -0,0 +1,370 @@
+<?php declare(strict_types=1);
+
+use Loki\AdminComponents\LokiComponent\Admin\Form\Field\FieldType\CategorySelection;
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+use Loki\AdminComponents\Form\Field\Field;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+/** @var Field $field */
+/** @var CategorySelection $fieldType */
+
+$viewModel = $block->getData('view_model');
+$field = $block->getField();
+$fieldType = $field->getFieldType();
+$categoryTreeNodes = $fieldType->getCategoryTree();
+?>
+<div
+    class="admin__field"
+    data-index="container_category_ids"
+    x-data="CategoriesSelection"
+    :class="classAdminField"
+>
+    <div class="admin__field-control admin__control-grouped">
+        <div class="admin__field" data-index="category_ids">
+            <div class="admin__field-label">
+                <label for="category-selection-box">
+                    <span :data-config-scope="scopeLabel">
+                        <?= $field->getLabel() ?>
+                    </span>
+                </label>
+            </div>
+            <div class="admin__field-control">
+                <div
+                    id="category-selection-box"
+                    class="admin__action-multiselect-wrap action-select-wrap admin__action-multiselect-tree"
+                    tabindex="0"
+                    :class="classMultiselectWrap"
+                    @keydown="keydownSwitcher"
+                    @click.outside="closeSelector"
+                    @keydown.escape.window="closeSelector"
+                >
+                    <div class="action-select admin__action-multiselect"
+                         data-role="advanced-select"
+                         :class="classMultiselect"
+                         @click="toggleListVisible"
+                    >
+                        <?= $fieldType->renderCategoriesBreadcrumb() ?>
+                    </div>
+                    <div class="action-menu"
+                         :class="classActionMenu"
+                    >
+                        <?= $fieldType->renderSearchInput() ?>
+                        <?php foreach ($categoryTreeNodes as $rootCategory): ?>
+                        <ul class="admin__action-multiselect-menu-inner _root"
+                            data-item-data="<?= $escaper->escapeHtmlAttr($fieldType->getCategoryNodeJson($rootCategory)) ?>"
+                            x-data="CategorySelectItem"
+                            x-show="isTreeView"
+                            x-cloak
+                            :data-level="itemLevel"
+                            :data-expanded="dataExpanded"
+                        >
+                            <li class="admin__action-multiselect-menu-inner-item _root"
+                                data-role="option-group"
+                                :class="classInnerItem"
+                            >
+                                <div class="action-menu-item"
+                                     :class="classActionMenuItem"
+                                     @mouseenter="handleMouseEnter"
+                                     @mouseleave="handleMouseLeave"
+                                     @click="toggleSelection"
+                                     @keydown.enter.window="toggleSelection"
+                                >
+                                    <template x-if="showIconToOpenLevels">
+                                        <div class="admin__action-multiselect-dropdown"
+                                             @click="toggleExpansion"
+                                        ></div>
+                                    </template>
+                                    <input
+                                        class="admin__control-checkbox"
+                                        type="checkbox"
+                                        tabindex="-1"
+                                        :checked="isSelected"
+                                    />
+                                    <label class="admin__action-multiselect-label">
+                                        <span><?= $escaper->escapeHtml($rootCategory->label) ?></span>
+                                    </label>
+                                </div>
+                                <?php foreach ($rootCategory->children as $childCategory): ?>
+                                    <?= $fieldType->renderChildCategoryNode($childCategory, $field)?>
+                                <?php endforeach; ?>
+                            </li>
+                        </ul>
+                        <?php endforeach; ?>
+
+                        <div class="admin__action-multiselect-actions-wrap">
+                            <button
+                                class="action-default"
+                                data-action="close-advanced-select"
+                                type="button"
+                                @click="closeSelector"
+                            >
+                                <span><?= $escaper->escapeHtml(__('Done')) ?></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    'use strict';
+
+    const CategorySelectionSearch = {
+        isSearchView: false,
+        searchResult: [],
+        hasSearchResult() {
+            return !!this.searchResult.length;
+        },
+        canShowNoResultMessage() {
+            return this.isSearchView && !this.hasSearchResult();
+        },
+        canShowSearchResult() {
+            return this.hasSearchResult() && this.isSearchView;
+        },
+    };
+
+    const CategorySelectionHover = {
+        hoverOnFirstItem() {
+            const firstHoverItemId = this.hoverSequence[0];
+            if (firstHoverItemId) {
+                this.items[firstHoverItemId].hovered = true;
+            }
+        },
+        getHoverSequenceByEventKey(key) {
+            const currentHoveredItem = this.getCurrentHoverItem();
+            const sequenceStartIndex = this.hoverSequence.findIndex((seq) => seq === currentHoveredItem.id);
+
+            if (sequenceStartIndex === -1) {
+                return [];
+            }
+
+            if (key === 'ArrowDown') {
+                return this.hoverSequence.slice(sequenceStartIndex + 1);
+            }
+            if (key === 'ArrowUp') {
+                return this.hoverSequence.slice(0, sequenceStartIndex).reverse();
+            }
+
+            return [];
+        },
+        getCurrentHoverItem() {
+            const currentHoveredItemId = Object.keys(this.items).find((itemId) => {
+                return this.items[itemId].hovered;
+            });
+
+            return this.items[currentHoveredItemId];
+        },
+        keydownSwitcher() {
+            this.$event.stopPropagation();
+
+            if (!['ArrowUp', 'ArrowDown'].includes(this.$event.key)) {
+                return;
+            }
+
+            this.$nextTick(() => {
+                this.$el.focus();
+            });
+            const currentHoveredItem = this.getCurrentHoverItem();
+
+            if (!currentHoveredItem) {
+                return this.hoverOnFirstItem();
+            }
+
+            let sequenceItemUsed = false;
+
+            for (const seqId of this.getHoverSequenceByEventKey(this.$event.key)) {
+                const item = this.items[seqId];
+                if (!item) {
+                    continue;
+                }
+
+                if (item.level <= currentHoveredItem.level) {
+                    item.hovered = true;
+                    sequenceItemUsed = true;
+                    break;
+                }
+
+                const parentItem = this.items[item.parentId];
+                if (parentItem.expanded) {
+                    item.hovered = true;
+                    sequenceItemUsed = true;
+                    break;
+                }
+            }
+            currentHoveredItem.hovered = false;
+            if (!sequenceItemUsed) {
+                this.hoverOnFirstItem();
+            }
+        },
+        updateItemHovered(id, hoverValue) {
+            if (!this.items[id]) {
+                return;
+            }
+
+            this.items[id].hovered = hoverValue;
+        },
+        isItemHovered(id) {
+            if (!this.items[id]) {
+                return false;
+            }
+
+            return this.items[id].hovered;
+        },
+    };
+
+    function CategoriesSelection() {
+        return {
+            ...CategorySelectionSearch,
+            ...CategorySelectionHover,
+            items: {},
+            listVisible: false,
+            isTreeView: true,
+            selectedCategoryIds: [],
+            scopeLabel: '[GLOBAL]',
+            hoverSequence: <?= /** @noEscape */$fieldType->getHoverSequenceJson() ?> || [],
+            lastLevel: <?= $fieldType->getMaxCategoryLevel($categoryTreeNodes) ?>,
+            isRequired: !!<?= (int)$field->isRequired() ?>,
+            classAdminField() {
+                return { _required: this.isRequired };
+            },
+            classMultiselectWrap() {
+                return {
+                    _active: this.listVisible,
+                    'admin__action-multiselect-tree': this.isTree(),
+                };
+            },
+            classMultiselect() {
+                return { _active: this.listVisible };
+            },
+            classActionMenu() {
+                return { _active: this.listVisible };
+            },
+            toggleListVisible() {
+                this.listVisible = !this.listVisible;
+            },
+            isTree() {
+                return true;
+            },
+            isItemSelected(id) {
+                return this.selectedCategoryIds.includes(id);
+            },
+            isLastLevel(level) {
+                return this.lastLevel === level;
+            },
+            isItemExpanded(id) {
+                if (!this.items[id]) {
+                    return false;
+                }
+
+                return this.items[id].expanded;
+            },
+            toggleItemExpansion(id) {
+                if (!this.items[id]) {
+                    return;
+                }
+
+                const currentValue = this.items[id].expanded;
+                this.items[id].expanded = !currentValue;
+            },
+            closeSelector() {
+                this.listVisible = false;
+            },
+            unselectCategoryId(id) {
+                this.selectedCategoryIds = this.selectedCategoryIds.filter(
+                    (categoryId) => categoryId !== id
+                );
+            },
+            toggleItemSelection(id) {
+                if (this.isItemSelected(id)) {
+                    return this.unselectCategoryId(id);
+                }
+
+                this.selectedCategoryIds.push(id);
+            },
+        };
+    }
+
+    function CategorySelectItemCommon() {
+        return {
+            data: null,
+            toggleSelection() {
+                if (!this.data) {
+                    return;
+                }
+                this.$event.stopPropagation();
+                this.toggleItemSelection(this.data.id);
+            },
+            isSelected() {
+                if (!this.data) {
+                    return false;
+                }
+                return this.isItemSelected(this.data.id);
+            },
+            classActionMenuItem() {
+                if (!this.data) {
+                    return {};
+                }
+                return {
+                    _selected: this.isItemSelected(this.data.id),
+                    _hover: this.isItemHovered(this.data.id),
+                    _expended: this.isItemExpanded(this.data.id),
+                    // '_unclickable': this.isLabelDecoration($data),
+                    _last: this.isLastLevel(this.data.level),
+                    '_with-checkbox': true,
+                };
+            },
+        }
+    }
+
+    function CategorySelectItem() {
+        return {
+            ...CategorySelectItemCommon(),
+            root: null,
+            init() {
+                this.root = this.$el;
+                const data = this.root.dataset.itemData;
+                if (data) {
+                    this.data = JSON.parse(data);
+                    this.items[this.data.id] = this.data;
+                }
+            },
+            get itemId() {
+                return this.data.id;
+            },
+            classInnerItem() {
+                return { _parent: this.data.hasChildren };
+            },
+            itemLevel() {
+                return this.data.level;
+            },
+            dataExpanded() {
+                return this.isItemExpanded(this.itemId) ? 'true' : 'false';
+            },
+            <?php  // The visibility of a node item depends upon its parent's "expanded" state ?>
+            canShow() {
+                return this.isItemExpanded(this.data.parentId);
+            },
+            showIconToOpenLevels() {
+                return !this.isLastLevel(this.data.level);
+            },
+            handleMouseEnter() {
+                this.updateItemHovered(this.itemId, true);
+            },
+            handleMouseLeave() {
+                this.updateItemHovered(this.itemId, false);
+            },
+            toggleExpansion() {
+                this.$event.stopPropagation();
+                this.toggleItemExpansion(this.itemId);
+            },
+        };
+    }
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('CategoriesSelection', CategoriesSelection);
+        Alpine.data('CategorySelectItem', CategorySelectItem);
+    });
+</script>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml b/view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml
new file mode 100644
index 0000000..0b5f7fc
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml
@@ -0,0 +1,57 @@
+<?php declare(strict_types=1);
+
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+?>
+<template x-for="categoryId in selectedCategoryIds" :key="categoryId">
+    <span class="admin__action-multiselect-crumb"
+          x-data="CategorySelectionCrumb"
+          :data-id="categoryId"
+    >
+        <span x-text="crumbLabel"></span>
+        <button
+            class="action-close"
+            type="button"
+            data-action="remove-selected-item"
+            tabindex="-1"
+            @click="removeSelected"
+            data-bind="click: $parent.removeSelected.bind($parent, value)
+        ">
+            <span class="action-close-text">
+                <?= $escaper->escapeHtml(__('Close')) ?>
+            </span>
+        </button>
+    </span>
+</template>
+<script>
+    'use strict';
+
+    function CategorySelectionCrumb() {
+        return {
+            root: null,
+            crumbId: null,
+            init() {
+                this.root = this.$el;
+                this.$nextTick(() => {
+                    this.crumbId = parseFloat(this.root.dataset.id);
+                });
+
+            },
+            crumbLabel() {
+                return this.items[this.crumbId]?.label || '';
+            },
+            removeSelected() {
+                this.$event.stopPropagation();
+                this.unselectCategoryId(this.crumbId);
+                console.log(this.selectedCategoryIds, this.crumbId);
+            },
+        };
+    }
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('CategorySelectionCrumb', CategorySelectionCrumb);
+    });
+</script>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
new file mode 100644
index 0000000..7d519ec
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
@@ -0,0 +1,163 @@
+<?php declare(strict_types=1);
+
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+?>
+<div
+    class="admin__action-multiselect-search-wrap"
+    x-data="CategoriesSelectionSearch"
+>
+    <input
+        id="category-search-input"
+        class="admin__control-text admin__action-multiselect-search"
+        data-role="advanced-select-text"
+        type="text"
+        @input="filterInputValue"
+    />
+    <label class="admin__action-multiselect-search-label"
+           data-action="advanced-select-search"
+           for="category-search-input"
+    ></label>
+    <template x-if="canShowSearchResult">
+        <div
+            class="admin__action-multiselect-search-count"
+            x-text="itemsQuantity"
+        ></div>
+    </template>
+</div>
+<template x-if="canShowSearchResult">
+<ul class="admin__action-multiselect-menu-inner _root">
+    <template x-for="search in searchResult" :key="search.id">
+        <li class="admin__action-multiselect-menu-inner-item _root"
+            :data-search-item-id="search.id"
+            x-data="CategoriesSelectionSearchResultItem"
+            data-bind="css: { _parent: $data.optgroup }"
+            data-role="option-group"
+        >
+            <div
+                class="action-menu-item"
+                :class="classActionMenuItem"
+                @click="toggleSelection"
+            >
+                <input
+                    class="admin__control-checkbox"
+                    type="checkbox"
+                    tabindex="-1"
+                    :checked="isSelected"
+                />
+                <label class="admin__action-multiselect-label">
+                    <span x-text="search.label"></span>
+                    <template x-if="hasParent">
+                        <span
+                            class="admin__action-multiselect-item-path"
+                            x-text="parentsPathText"></span>
+                    </template>
+                </label>
+            </div>
+        </li>
+    </template>
+</ul>
+</template>
+<template x-if="canShowNoResultMessage">
+    <div style="padding: 2rem; text-align: center;">
+        <?= __('No results found.') ?>
+    </div>
+</template>
+
+<script>
+    'use strict';
+
+    function CategoriesSelectionSearch() {
+        return {
+            itemsQuantity() {
+                return this.searchResult.length === 1 ?
+                    "1 <?= $escaper->escapeJs(__('option')) ?>" :
+                    this.searchResult.length.toString() + " <?= $escaper->escapeJs(__('options')) ?>";
+            },
+            filterInputValue() {
+                const searchValue = this.$event.target.value.trim().toLowerCase();
+
+                if (!searchValue) {
+                    this.searchResult = [];
+                    return this.switchToTreeView();
+                }
+
+                this.searchResult = this.prepareFilteredResult(searchValue);
+
+                this.switchToSearchView();
+            },
+            switchToSearchView() {
+                if (!this.isSearchView) {
+                    this.isTreeView = false;
+                    this.isSearchView = true;
+                }
+            },
+            switchToTreeView() {
+                if (!this.isTreeView) {
+                    this.isTreeView = true;
+                    this.isSearchView = false;
+                }
+            },
+            prepareFilteredResult(value) {
+                const result = [];
+
+                Object.keys(this.items).forEach((itemId) => {
+                    const item = this.items[itemId];
+                    const currentOption = item.label.toLowerCase();
+
+                    if (currentOption.indexOf(value) > -1) {
+                        result.push(item);
+                    }
+                });
+
+                return result;
+            },
+        };
+    }
+
+    function CategoriesSelectionSearchResultItem() {
+        return {
+            ...CategorySelectItemCommon(),
+            get itemId() {
+                return this.data.id;
+            },
+            init() {
+                this.$nextTick(() => {
+                    const searchItemId = parseFloat(this.$el.dataset.searchItemId);
+                    this.data = this.items[searchItemId];
+                });
+            },
+            hasParent() {
+                return !!this.data?.parentId;
+            },
+            parentsPathText() {
+                if (!this.data) {
+                    return '';
+                }
+
+                const parentsPath = this.items[this.itemId].parentsPath;
+                if (parentsPath !== null) {
+                    return parentsPath;
+                }
+
+                let paths = [];
+
+                this.data.parentIds.forEach((parentId) => {
+                    paths.push(this.items[parentId].label);
+                });
+
+                this.items[this.itemId].parentsPath = paths.join(' / ');
+
+                return this.items[this.itemId].parentsPath;
+            },
+        };
+    }
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('CategoriesSelectionSearch', CategoriesSelectionSearch);
+        Alpine.data('CategoriesSelectionSearchResultItem', CategoriesSelectionSearchResultItem);
+    });
+</script>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
new file mode 100644
index 0000000..d086132
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
@@ -0,0 +1,55 @@
+<?php declare(strict_types=1);
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\LokiComponent\Admin\Form\Field\FieldType\CategorySelection;
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+use Loki\AdminComponents\Form\Field\Field;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+/** @var Field $field */
+/** @var CategorySelection $fieldType */
+/** @var CategoryTreeNode $categoryTreeNode */
+
+$field = $block->getData('field');
+$categoryTreeNode = $block->getData('category_tree_node');
+$fieldType = $field->getFieldType();
+?>
+<ul class="admin__action-multiselect-menu-inner"
+    data-item-data="<?= $escaper->escapeHtmlAttr($fieldType->getCategoryNodeJson($categoryTreeNode)) ?>"
+    x-data="CategorySelectItem"
+    x-show="canShow"
+    :data-level="itemLevel"
+    :data-expanded="dataExpanded"
+>
+    <li class="admin__action-multiselect-menu-inner-item"
+        :class="classInnerItem"
+    >
+        <div class="action-menu-item _with-checkbox _expended _hover"
+             :class="classActionMenuItem"
+             @mouseenter="handleMouseEnter"
+             @mouseleave="handleMouseLeave"
+             @click="toggleSelection"
+             @keydown.enter.window="toggleSelection"
+        >
+            <template x-if="showIconToOpenLevels">
+                <div class="admin__action-multiselect-dropdown"
+                     @click="toggleExpansion"
+                ></div>
+            </template>
+            <input
+                class="admin__control-checkbox"
+                type="checkbox"
+                tabindex="-1"
+                :checked="isSelected"
+            />
+            <label class="admin__action-multiselect-label">
+                <?= $escaper->escapeHtmlAttr($categoryTreeNode->label) ?>
+            </label>
+        </div>
+        <?php foreach ($categoryTreeNode->children as $childCategory): ?>
+            <?= $fieldType->renderChildCategoryNode($childCategory, $field)?>
+        <?php endforeach; ?>
+    </li>
+</ul>

From 7d2cad63f3a46e132e878a3f518e98c47649c472 Mon Sep 17 00:00:00 2001
From: Rajeev K Tomy <rajeevphpdeveloper@gmail.com>
Date: Mon, 9 Feb 2026 15:43:13 +0100
Subject: [PATCH 2/6] separate main script from the main template of category
 selection

---
 Data/CategoryTreeNode.php                     |   1 -
 Form/Field/FieldType/CategorySelection.php    |   5 +
 .../CategorySelection/CategoryTreeBuilder.php |  14 +-
 .../CategoryTreeRenderer.php                  |  33 ++-
 .../form/field_type/category_selection.phtml  | 270 +----------------
 .../category_selection/main_js.phtml          | 275 ++++++++++++++++++
 .../category_selection/search_input.phtml     |   2 +-
 .../select_inner_item.phtml                   |   4 +-
 8 files changed, 326 insertions(+), 278 deletions(-)
 create mode 100644 view/adminhtml/templates/form/field_type/category_selection/main_js.phtml

diff --git a/Data/CategoryTreeNode.php b/Data/CategoryTreeNode.php
index 376a485..7e993f8 100644
--- a/Data/CategoryTreeNode.php
+++ b/Data/CategoryTreeNode.php
@@ -30,4 +30,3 @@ public function toUiArray(): array
         );
     }
 }
-
diff --git a/Form/Field/FieldType/CategorySelection.php b/Form/Field/FieldType/CategorySelection.php
index 0b99efc..21d7861 100644
--- a/Form/Field/FieldType/CategorySelection.php
+++ b/Form/Field/FieldType/CategorySelection.php
@@ -38,6 +38,11 @@ public function getMaxCategoryLevel(array $categoryTreeNodes): int
         return $this->categoryTreeBuilder->calculateMaxLevel($categoryTreeNodes);
     }
 
+    public function renderMainScript(Field $field): string
+    {
+        return $this->categoryTreeRenderer->renderMainScript($field);
+    }
+
     public function renderChildCategoryNode(CategoryTreeNode $categoryTreeNode, Field $field): string
     {
         return $this->categoryTreeRenderer->renderChildNode($categoryTreeNode, $field);
diff --git a/Service/CategorySelection/CategoryTreeBuilder.php b/Service/CategorySelection/CategoryTreeBuilder.php
index d7b2898..7eb7f94 100644
--- a/Service/CategorySelection/CategoryTreeBuilder.php
+++ b/Service/CategorySelection/CategoryTreeBuilder.php
@@ -226,13 +226,13 @@ private function convertArrayToTreeNodes(array $treeData): array
     {
         return array_map(fn (array $nodeData) =>
             new CategoryTreeNode(
-                    id: $nodeData['id'],
-                    label: $nodeData['label'],
-                    isActive: $nodeData['isActive'],
-                    level: $nodeData['level'],
-                    parentId: $nodeData['parentId'],
-                    parentIds: $nodeData['parentIds'],
-                    children: $this->convertArrayToTreeNodes($nodeData['children'] ?? [])
+                id: $nodeData['id'],
+                label: $nodeData['label'],
+                isActive: $nodeData['isActive'],
+                level: $nodeData['level'],
+                parentId: $nodeData['parentId'],
+                parentIds: $nodeData['parentIds'],
+                children: $this->convertArrayToTreeNodes($nodeData['children'] ?? [])
             ),
             $treeData
         );
diff --git a/Service/CategorySelection/CategoryTreeRenderer.php b/Service/CategorySelection/CategoryTreeRenderer.php
index 8b71f53..2eeccfd 100644
--- a/Service/CategorySelection/CategoryTreeRenderer.php
+++ b/Service/CategorySelection/CategoryTreeRenderer.php
@@ -13,6 +13,8 @@ class CategoryTreeRenderer
 {
     private const TEMPLATE_CHILD_ITEM =
         'Loki_AdminComponents::form/field_type/category_selection/select_inner_item.phtml';
+    private const MAIN_SCRIPT =
+        'Loki_AdminComponents::form/field_type/category_selection/main_js.phtml';
     private const TEMPLATE_BREADCRUMB = 'Loki_AdminComponents::form/field_type/category_selection/crumbs.phtml';
     private const TEMPLATE_SEARCH = 'Loki_AdminComponents::form/field_type/category_selection/search_input.phtml';
 
@@ -21,6 +23,14 @@ public function __construct(
     ) {
     }
 
+    public function renderMainScript(Field $field): string
+    {
+        return $this->layout->createBlock(Template::class, 'category_selection_main_script')
+            ->setData('field', $field)
+            ->setTemplate($this->getMainScript())
+            ->toHtml();
+    }
+
     public function renderChildNode(CategoryTreeNode $categoryTreeNode, Field $field): string
     {
         return $this->layout->createBlock(Template::class, 'category_selection_inner_item_' . $categoryTreeNode->id)
@@ -44,18 +54,35 @@ public function renderSearchInput(): string
             ->toHtml();
     }
 
-    private function getChildItemTemplate(): string
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getChildItemTemplate(): string
     {
         return self::TEMPLATE_CHILD_ITEM;
     }
 
-    private function getBreadcrumbsTemplate(): string
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getBreadcrumbsTemplate(): string
     {
         return self::TEMPLATE_BREADCRUMB;
     }
 
-    private function getSearchInputTemplate(): string
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getSearchInputTemplate(): string
     {
         return self::TEMPLATE_SEARCH;
     }
+
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getMainScript(): string
+    {
+        return self::MAIN_SCRIPT;
+    }
 }
diff --git a/view/adminhtml/templates/form/field_type/category_selection.phtml b/view/adminhtml/templates/form/field_type/category_selection.phtml
index d20306e..49537aa 100644
--- a/view/adminhtml/templates/form/field_type/category_selection.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection.phtml
@@ -1,6 +1,6 @@
 <?php declare(strict_types=1);
 
-use Loki\AdminComponents\LokiComponent\Admin\Form\Field\FieldType\CategorySelection;
+use Loki\AdminComponents\Form\Field\FieldType\CategorySelection;
 use Magento\Framework\Escaper;
 use Magento\Framework\View\Element\Template;
 use Loki\AdminComponents\Form\Field\Field;
@@ -26,7 +26,7 @@ $categoryTreeNodes = $fieldType->getCategoryTree();
             <div class="admin__field-label">
                 <label for="category-selection-box">
                     <span :data-config-scope="scopeLabel">
-                        <?= $field->getLabel() ?>
+                        <?= $escaper->escapeHtml($field->getLabel()) ?>
                     </span>
                 </label>
             </div>
@@ -45,12 +45,12 @@ $categoryTreeNodes = $fieldType->getCategoryTree();
                          :class="classMultiselect"
                          @click="toggleListVisible"
                     >
-                        <?= $fieldType->renderCategoriesBreadcrumb() ?>
+                        <?= /** @noEscape */ $fieldType->renderCategoriesBreadcrumb() ?>
                     </div>
                     <div class="action-menu"
                          :class="classActionMenu"
                     >
-                        <?= $fieldType->renderSearchInput() ?>
+                        <?= /** @noEscape */ $fieldType->renderSearchInput() ?>
                         <?php foreach ($categoryTreeNodes as $rootCategory): ?>
                         <ul class="admin__action-multiselect-menu-inner _root"
                             data-item-data="<?= $escaper->escapeHtmlAttr($fieldType->getCategoryNodeJson($rootCategory)) ?>"
@@ -87,7 +87,7 @@ $categoryTreeNodes = $fieldType->getCategoryTree();
                                     </label>
                                 </div>
                                 <?php foreach ($rootCategory->children as $childCategory): ?>
-                                    <?= $fieldType->renderChildCategoryNode($childCategory, $field)?>
+                                    <?= /** @noEscape */ $fieldType->renderChildCategoryNode($childCategory, $field)?>
                                 <?php endforeach; ?>
                             </li>
                         </ul>
@@ -109,262 +109,4 @@ $categoryTreeNodes = $fieldType->getCategoryTree();
         </div>
     </div>
 </div>
-<script>
-    'use strict';
-
-    const CategorySelectionSearch = {
-        isSearchView: false,
-        searchResult: [],
-        hasSearchResult() {
-            return !!this.searchResult.length;
-        },
-        canShowNoResultMessage() {
-            return this.isSearchView && !this.hasSearchResult();
-        },
-        canShowSearchResult() {
-            return this.hasSearchResult() && this.isSearchView;
-        },
-    };
-
-    const CategorySelectionHover = {
-        hoverOnFirstItem() {
-            const firstHoverItemId = this.hoverSequence[0];
-            if (firstHoverItemId) {
-                this.items[firstHoverItemId].hovered = true;
-            }
-        },
-        getHoverSequenceByEventKey(key) {
-            const currentHoveredItem = this.getCurrentHoverItem();
-            const sequenceStartIndex = this.hoverSequence.findIndex((seq) => seq === currentHoveredItem.id);
-
-            if (sequenceStartIndex === -1) {
-                return [];
-            }
-
-            if (key === 'ArrowDown') {
-                return this.hoverSequence.slice(sequenceStartIndex + 1);
-            }
-            if (key === 'ArrowUp') {
-                return this.hoverSequence.slice(0, sequenceStartIndex).reverse();
-            }
-
-            return [];
-        },
-        getCurrentHoverItem() {
-            const currentHoveredItemId = Object.keys(this.items).find((itemId) => {
-                return this.items[itemId].hovered;
-            });
-
-            return this.items[currentHoveredItemId];
-        },
-        keydownSwitcher() {
-            this.$event.stopPropagation();
-
-            if (!['ArrowUp', 'ArrowDown'].includes(this.$event.key)) {
-                return;
-            }
-
-            this.$nextTick(() => {
-                this.$el.focus();
-            });
-            const currentHoveredItem = this.getCurrentHoverItem();
-
-            if (!currentHoveredItem) {
-                return this.hoverOnFirstItem();
-            }
-
-            let sequenceItemUsed = false;
-
-            for (const seqId of this.getHoverSequenceByEventKey(this.$event.key)) {
-                const item = this.items[seqId];
-                if (!item) {
-                    continue;
-                }
-
-                if (item.level <= currentHoveredItem.level) {
-                    item.hovered = true;
-                    sequenceItemUsed = true;
-                    break;
-                }
-
-                const parentItem = this.items[item.parentId];
-                if (parentItem.expanded) {
-                    item.hovered = true;
-                    sequenceItemUsed = true;
-                    break;
-                }
-            }
-            currentHoveredItem.hovered = false;
-            if (!sequenceItemUsed) {
-                this.hoverOnFirstItem();
-            }
-        },
-        updateItemHovered(id, hoverValue) {
-            if (!this.items[id]) {
-                return;
-            }
-
-            this.items[id].hovered = hoverValue;
-        },
-        isItemHovered(id) {
-            if (!this.items[id]) {
-                return false;
-            }
-
-            return this.items[id].hovered;
-        },
-    };
-
-    function CategoriesSelection() {
-        return {
-            ...CategorySelectionSearch,
-            ...CategorySelectionHover,
-            items: {},
-            listVisible: false,
-            isTreeView: true,
-            selectedCategoryIds: [],
-            scopeLabel: '[GLOBAL]',
-            hoverSequence: <?= /** @noEscape */$fieldType->getHoverSequenceJson() ?> || [],
-            lastLevel: <?= $fieldType->getMaxCategoryLevel($categoryTreeNodes) ?>,
-            isRequired: !!<?= (int)$field->isRequired() ?>,
-            classAdminField() {
-                return { _required: this.isRequired };
-            },
-            classMultiselectWrap() {
-                return {
-                    _active: this.listVisible,
-                    'admin__action-multiselect-tree': this.isTree(),
-                };
-            },
-            classMultiselect() {
-                return { _active: this.listVisible };
-            },
-            classActionMenu() {
-                return { _active: this.listVisible };
-            },
-            toggleListVisible() {
-                this.listVisible = !this.listVisible;
-            },
-            isTree() {
-                return true;
-            },
-            isItemSelected(id) {
-                return this.selectedCategoryIds.includes(id);
-            },
-            isLastLevel(level) {
-                return this.lastLevel === level;
-            },
-            isItemExpanded(id) {
-                if (!this.items[id]) {
-                    return false;
-                }
-
-                return this.items[id].expanded;
-            },
-            toggleItemExpansion(id) {
-                if (!this.items[id]) {
-                    return;
-                }
-
-                const currentValue = this.items[id].expanded;
-                this.items[id].expanded = !currentValue;
-            },
-            closeSelector() {
-                this.listVisible = false;
-            },
-            unselectCategoryId(id) {
-                this.selectedCategoryIds = this.selectedCategoryIds.filter(
-                    (categoryId) => categoryId !== id
-                );
-            },
-            toggleItemSelection(id) {
-                if (this.isItemSelected(id)) {
-                    return this.unselectCategoryId(id);
-                }
-
-                this.selectedCategoryIds.push(id);
-            },
-        };
-    }
-
-    function CategorySelectItemCommon() {
-        return {
-            data: null,
-            toggleSelection() {
-                if (!this.data) {
-                    return;
-                }
-                this.$event.stopPropagation();
-                this.toggleItemSelection(this.data.id);
-            },
-            isSelected() {
-                if (!this.data) {
-                    return false;
-                }
-                return this.isItemSelected(this.data.id);
-            },
-            classActionMenuItem() {
-                if (!this.data) {
-                    return {};
-                }
-                return {
-                    _selected: this.isItemSelected(this.data.id),
-                    _hover: this.isItemHovered(this.data.id),
-                    _expended: this.isItemExpanded(this.data.id),
-                    // '_unclickable': this.isLabelDecoration($data),
-                    _last: this.isLastLevel(this.data.level),
-                    '_with-checkbox': true,
-                };
-            },
-        }
-    }
-
-    function CategorySelectItem() {
-        return {
-            ...CategorySelectItemCommon(),
-            root: null,
-            init() {
-                this.root = this.$el;
-                const data = this.root.dataset.itemData;
-                if (data) {
-                    this.data = JSON.parse(data);
-                    this.items[this.data.id] = this.data;
-                }
-            },
-            get itemId() {
-                return this.data.id;
-            },
-            classInnerItem() {
-                return { _parent: this.data.hasChildren };
-            },
-            itemLevel() {
-                return this.data.level;
-            },
-            dataExpanded() {
-                return this.isItemExpanded(this.itemId) ? 'true' : 'false';
-            },
-            <?php  // The visibility of a node item depends upon its parent's "expanded" state ?>
-            canShow() {
-                return this.isItemExpanded(this.data.parentId);
-            },
-            showIconToOpenLevels() {
-                return !this.isLastLevel(this.data.level);
-            },
-            handleMouseEnter() {
-                this.updateItemHovered(this.itemId, true);
-            },
-            handleMouseLeave() {
-                this.updateItemHovered(this.itemId, false);
-            },
-            toggleExpansion() {
-                this.$event.stopPropagation();
-                this.toggleItemExpansion(this.itemId);
-            },
-        };
-    }
-
-    document.addEventListener('alpine:init', () => {
-        Alpine.data('CategoriesSelection', CategoriesSelection);
-        Alpine.data('CategorySelectItem', CategorySelectItem);
-    });
-</script>
+<?= /** @noEscape */ $fieldType->renderMainScript($field) ?>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
new file mode 100644
index 0000000..ae62514
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
@@ -0,0 +1,275 @@
+<?php declare(strict_types=1);
+
+use Loki\AdminComponents\Form\Field\Field;
+use Loki\AdminComponents\Form\Field\FieldType\CategorySelection;
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+/** @var Field $field */
+/** @var CategorySelection $fieldType */
+
+$field = $block->getData('field');
+$fieldType = $field->getFieldType();
+$maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
+?>
+<script>
+    'use strict';
+
+    const CategorySelectionSearch = {
+        isSearchView: false,
+        searchResult: [],
+        hasSearchResult() {
+            return !!this.searchResult.length;
+        },
+        canShowNoResultMessage() {
+            return this.isSearchView && !this.hasSearchResult();
+        },
+        canShowSearchResult() {
+            return this.hasSearchResult() && this.isSearchView;
+        },
+    };
+
+    const CategorySelectionHover = {
+        hoverOnFirstItem() {
+            const firstHoverItemId = this.hoverSequence[0];
+            if (firstHoverItemId) {
+                this.items[firstHoverItemId].hovered = true;
+            }
+        },
+        getHoverSequenceByEventKey(key) {
+            const currentHoveredItem = this.getCurrentHoverItem();
+            const sequenceStartIndex = this.hoverSequence.findIndex((seq) => seq === currentHoveredItem.id);
+
+            if (sequenceStartIndex === -1) {
+                return [];
+            }
+
+            if (key === 'ArrowDown') {
+                return this.hoverSequence.slice(sequenceStartIndex + 1);
+            }
+            if (key === 'ArrowUp') {
+                return this.hoverSequence.slice(0, sequenceStartIndex).reverse();
+            }
+
+            return [];
+        },
+        getCurrentHoverItem() {
+            const currentHoveredItemId = Object.keys(this.items).find((itemId) => {
+                return this.items[itemId].hovered;
+            });
+
+            return this.items[currentHoveredItemId];
+        },
+        keydownSwitcher() {
+            this.$event.stopPropagation();
+
+            if (!['ArrowUp', 'ArrowDown'].includes(this.$event.key)) {
+                return;
+            }
+
+            this.$nextTick(() => {
+                this.$el.focus();
+            });
+            const currentHoveredItem = this.getCurrentHoverItem();
+
+            if (!currentHoveredItem) {
+                return this.hoverOnFirstItem();
+            }
+
+            let sequenceItemUsed = false;
+
+            for (const seqId of this.getHoverSequenceByEventKey(this.$event.key)) {
+                const item = this.items[seqId];
+                if (!item) {
+                    continue;
+                }
+
+                if (item.level <= currentHoveredItem.level) {
+                    item.hovered = true;
+                    sequenceItemUsed = true;
+                    break;
+                }
+
+                const parentItem = this.items[item.parentId];
+                if (parentItem.expanded) {
+                    item.hovered = true;
+                    sequenceItemUsed = true;
+                    break;
+                }
+            }
+            currentHoveredItem.hovered = false;
+            if (!sequenceItemUsed) {
+                this.hoverOnFirstItem();
+            }
+        },
+        updateItemHovered(id, hoverValue) {
+            if (!this.items[id]) {
+                return;
+            }
+
+            this.items[id].hovered = hoverValue;
+        },
+        isItemHovered(id) {
+            if (!this.items[id]) {
+                return false;
+            }
+
+            return this.items[id].hovered;
+        },
+    };
+
+    function CategoriesSelection() {
+        return {
+            ...CategorySelectionSearch,
+            ...CategorySelectionHover,
+            items: {},
+            listVisible: false,
+            isTreeView: true,
+            selectedCategoryIds: [],
+            scopeLabel: '[GLOBAL]',
+            hoverSequence: <?= /** @noEscape */$fieldType->getHoverSequenceJson() ?> || [],
+            lastLevel: <?= /** @noEscape */ (int)$maxTreeLevel ?>,
+            isRequired: !!<?= (int)$field->isRequired() ?>,
+            classAdminField() {
+                return { _required: this.isRequired };
+            },
+            classMultiselectWrap() {
+                return {
+                    _active: this.listVisible,
+                    'admin__action-multiselect-tree': this.isTree(),
+                };
+            },
+            classMultiselect() {
+                return { _active: this.listVisible };
+            },
+            classActionMenu() {
+                return { _active: this.listVisible };
+            },
+            toggleListVisible() {
+                this.listVisible = !this.listVisible;
+            },
+            isTree() {
+                return true;
+            },
+            isItemSelected(id) {
+                return this.selectedCategoryIds.includes(id);
+            },
+            isLastLevel(level) {
+                return this.lastLevel === level;
+            },
+            isItemExpanded(id) {
+                if (!this.items[id]) {
+                    return false;
+                }
+
+                return this.items[id].expanded;
+            },
+            toggleItemExpansion(id) {
+                if (!this.items[id]) {
+                    return;
+                }
+
+                const currentValue = this.items[id].expanded;
+                this.items[id].expanded = !currentValue;
+            },
+            closeSelector() {
+                this.listVisible = false;
+            },
+            unselectCategoryId(id) {
+                this.selectedCategoryIds = this.selectedCategoryIds.filter(
+                    (categoryId) => categoryId !== id
+                );
+            },
+            toggleItemSelection(id) {
+                if (this.isItemSelected(id)) {
+                    return this.unselectCategoryId(id);
+                }
+
+                this.selectedCategoryIds.push(id);
+            },
+        };
+    }
+
+    function CategorySelectItemCommon() {
+        return {
+            data: null,
+            toggleSelection() {
+                if (!this.data) {
+                    return;
+                }
+                this.$event.stopPropagation();
+                this.toggleItemSelection(this.data.id);
+            },
+            isSelected() {
+                if (!this.data) {
+                    return false;
+                }
+                return this.isItemSelected(this.data.id);
+            },
+            classActionMenuItem() {
+                if (!this.data) {
+                    return {};
+                }
+                return {
+                    _selected: this.isItemSelected(this.data.id),
+                    _hover: this.isItemHovered(this.data.id),
+                    _expended: this.isItemExpanded(this.data.id),
+                    // '_unclickable': this.isLabelDecoration($data),
+                    _last: this.isLastLevel(this.data.level),
+                    '_with-checkbox': true,
+                };
+            },
+        }
+    }
+
+    function CategorySelectItem() {
+        return {
+            ...CategorySelectItemCommon(),
+            root: null,
+            init() {
+                this.root = this.$el;
+                const data = this.root.dataset.itemData;
+                if (data) {
+                    this.data = JSON.parse(data);
+                    this.items[this.data.id] = this.data;
+                }
+            },
+            get itemId() {
+                return this.data.id;
+            },
+            classInnerItem() {
+                return { _parent: this.data.hasChildren };
+            },
+            itemLevel() {
+                return this.data.level;
+            },
+            dataExpanded() {
+                return this.isItemExpanded(this.itemId) ? 'true' : 'false';
+            },
+            <?php  // The visibility of a node item depends upon its parent's "expanded" state ?>
+            canShow() {
+                return this.isItemExpanded(this.data.parentId);
+            },
+            showIconToOpenLevels() {
+                return !this.isLastLevel(this.data.level);
+            },
+            handleMouseEnter() {
+                this.updateItemHovered(this.itemId, true);
+            },
+            handleMouseLeave() {
+                this.updateItemHovered(this.itemId, false);
+            },
+            toggleExpansion() {
+                this.$event.stopPropagation();
+                this.toggleItemExpansion(this.itemId);
+            },
+        };
+    }
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('CategoriesSelection', CategoriesSelection);
+        Alpine.data('CategorySelectItem', CategorySelectItem);
+    });
+</script>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
index 7d519ec..1b059b0 100644
--- a/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
@@ -63,7 +63,7 @@ use Magento\Framework\View\Element\Template;
 </template>
 <template x-if="canShowNoResultMessage">
     <div style="padding: 2rem; text-align: center;">
-        <?= __('No results found.') ?>
+        <?= $escaper->escapeHtml(__('No results found.')) ?>
     </div>
 </template>
 
diff --git a/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
index d086132..9f310c6 100644
--- a/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
@@ -1,7 +1,7 @@
 <?php declare(strict_types=1);
 
 use Loki\AdminComponents\Data\CategoryTreeNode;
-use Loki\AdminComponents\LokiComponent\Admin\Form\Field\FieldType\CategorySelection;
+use Loki\AdminComponents\Form\Field\FieldType\CategorySelection;
 use Magento\Framework\Escaper;
 use Magento\Framework\View\Element\Template;
 use Loki\AdminComponents\Form\Field\Field;
@@ -49,7 +49,7 @@ $fieldType = $field->getFieldType();
             </label>
         </div>
         <?php foreach ($categoryTreeNode->children as $childCategory): ?>
-            <?= $fieldType->renderChildCategoryNode($childCategory, $field)?>
+            <?= /** @noEscape */ $fieldType->renderChildCategoryNode($childCategory, $field)?>
         <?php endforeach; ?>
     </li>
 </ul>

From ae660c340ef9ed84fd07821a35ee5b87cad6e9d3 Mon Sep 17 00:00:00 2001
From: Rajeev K Tomy <rajeevphpdeveloper@gmail.com>
Date: Mon, 9 Feb 2026 16:28:21 +0100
Subject: [PATCH 3/6] remove unnecessary classes from
 category_selection/select_inner_item.phtml

---
 .../form/field_type/category_selection/select_inner_item.phtml  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
index 9f310c6..e8dd51c 100644
--- a/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
@@ -26,7 +26,7 @@ $fieldType = $field->getFieldType();
     <li class="admin__action-multiselect-menu-inner-item"
         :class="classInnerItem"
     >
-        <div class="action-menu-item _with-checkbox _expended _hover"
+        <div class="action-menu-item"
              :class="classActionMenuItem"
              @mouseenter="handleMouseEnter"
              @mouseleave="handleMouseLeave"

From 16ae0219025b1f0cea053862ff96046b9033c05e Mon Sep 17 00:00:00 2001
From: Rajeev K Tomy <rajeevphpdeveloper@gmail.com>
Date: Mon, 9 Feb 2026 16:38:30 +0100
Subject: [PATCH 4/6] Change category_selection input alpine component name to
 CategorySelection

---
 .../templates/form/field_type/category_selection.phtml        | 2 +-
 .../form/field_type/category_selection/main_js.phtml          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/view/adminhtml/templates/form/field_type/category_selection.phtml b/view/adminhtml/templates/form/field_type/category_selection.phtml
index 49537aa..fd3745d 100644
--- a/view/adminhtml/templates/form/field_type/category_selection.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection.phtml
@@ -18,7 +18,7 @@ $categoryTreeNodes = $fieldType->getCategoryTree();
 <div
     class="admin__field"
     data-index="container_category_ids"
-    x-data="CategoriesSelection"
+    x-data="CategorySelection"
     :class="classAdminField"
 >
     <div class="admin__field-control admin__control-grouped">
diff --git a/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
index ae62514..9c1f732 100644
--- a/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
@@ -120,7 +120,7 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
         },
     };
 
-    function CategoriesSelection() {
+    function CategorySelection() {
         return {
             ...CategorySelectionSearch,
             ...CategorySelectionHover,
@@ -269,7 +269,7 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
     }
 
     document.addEventListener('alpine:init', () => {
-        Alpine.data('CategoriesSelection', CategoriesSelection);
+        Alpine.data('CategorySelection', CategorySelection);
         Alpine.data('CategorySelectItem', CategorySelectItem);
     });
 </script>

From cdbd253be190a10bf8c17a6944d2e521af6e0f5d Mon Sep 17 00:00:00 2001
From: Rajeev K Tomy <rajeevphpdeveloper@gmail.com>
Date: Mon, 9 Feb 2026 16:56:55 +0100
Subject: [PATCH 5/6] avoid sending children infor as part of UI data from
 CategoryTreeNode DTO

---
 Data/CategoryTreeNode.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/Data/CategoryTreeNode.php b/Data/CategoryTreeNode.php
index 7e993f8..87a903f 100644
--- a/Data/CategoryTreeNode.php
+++ b/Data/CategoryTreeNode.php
@@ -19,7 +19,7 @@ public function __construct(
 
     public function toUiArray(): array
     {
-        return array_merge(
+        $uiData = array_merge(
             get_object_vars($this),
             [
                 'hasChildren' => $this->children !== [],
@@ -28,5 +28,9 @@ public function toUiArray(): array
                 'parentsPath' => null,
             ]
         );
+
+        unset($uiData['children']);
+
+        return $uiData;
     }
 }

From 852c69b721229f790322b5da7b58a636e2b5b2b6 Mon Sep 17 00:00:00 2001
From: Rajeev K Tomy <rajeevphpdeveloper@gmail.com>
Date: Mon, 9 Feb 2026 17:09:30 +0100
Subject: [PATCH 6/6] fix intermittent issues where this.data.id is not
 avaiable with category_selection alpine components

---
 .../templates/form/field_type/category_selection/main_js.phtml  | 2 +-
 .../form/field_type/category_selection/search_input.phtml       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
index 9c1f732..0715400 100644
--- a/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
@@ -237,7 +237,7 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
                 }
             },
             get itemId() {
-                return this.data.id;
+                return this.data?.id;
             },
             classInnerItem() {
                 return { _parent: this.data.hasChildren };
diff --git a/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
index 1b059b0..ac20d03 100644
--- a/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
+++ b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
@@ -122,7 +122,7 @@ use Magento\Framework\View\Element\Template;
         return {
             ...CategorySelectItemCommon(),
             get itemId() {
-                return this.data.id;
+                return this.data?.id;
             },
             init() {
                 this.$nextTick(() => {