k-dropdown navigation bug

Daandelange commented 2 years ago

Description

k-dropdown-item can either resolve to be a k-button-disabled, k-button-native or k-button-link.
Items that resolve to k-button-link have no focus() method, which causes the parent k-dropdown's arrow navigation to select the correct items, but without outlining them visually. (a navigation bug?)

Expected behavior
The k-button-link items are outlined like all other k-dropdown-item items.

To reproduce

Install this plugin and navigate the the k-button-link-bug area, open the menu and navigate it with the up/down arrows.

// File = ./site/plugins/button-link-focus/index.php
Kirby::plugin('kirbybugs/k-button-link-focus', [
    'areas' => [
        'button-link-bug' => [
            'label' => 'k-button-link-bug',
            'icon' => 'bug',
            'link' => 'k-button-link-bug',
            'menu' => true,
            'views' => [
                [
                    'pattern' => 'k-button-link-bug',
                    'action'  => function () {
                        return [
                            'component' => 'k-button-link-bug-view',
                            'title' => 'k-button-link-bug',
                        ];
                    },
                ],
            ],
        ],
    ],
]);

// File = ./site/plugins/button-link-focus/index.js
panel.plugin('kirbybugs/k-button-link-focus', {
  components: {
    // FIX: Replaces kirby component, injecting focus() on 'k-button-link' for K3.6.2
    //'k-button-link': {extends:'k-button-link',methods:{focus:function(){this.$el.focus();}}},

    // Area for demonstrating the bug
    'k-button-link-bug-view': {
      template:
`<k-inside>
  <k-header>k-button-link-bug</k-header>
  <!-- Based on : https://getkirby.com/docs/reference/plugins/ui/dropdown#items -->
  <k-dropdown>
  <k-button @click="$refs.dropdown.toggle()">Open Dropdown</k-button>
  <k-dropdown-content
    ref="dropdown"
    :options="[
      {icon: 'check', text: 'k-button-disabled', disabled: true, theme:'positive'},
      {icon: 'check', text: 'k-button-native', click: function(){}, theme:'positive'},
      {icon: 'bug', text: 'k-button-link', link: 'https://getkirby.com/', theme:'negative'}
    ]"
  />
</k-dropdown></k-inside>`,
    },
  },
);

Quickfix or Solution

Uncomment fix in plugin (above) or implement focus() otherwise on k-button-link.

Your setup

Kirby Version
3.6.2

distantnative commented 2 years ago

Thanks for the great reproduction plugin - also I agree with the suggested fix and opened a PR: https://github.com/getkirby/kirby/pull/4152

bastianallgeier commented 2 years ago

✅

getkirby / kirby