title: SwiftUI keyboard navigation in lists on MacOS
body: <p>I'm trying to implement a list which can be navigated with arrow keys - up/down. I've created layout, but now I don't totally understand how(and where) to make up/down keys intercepted so I could add my custom logic. I already tried <code>onMoveCommand</code> with <code>focusable</code> but that did not work(wasn't firing at all)</p>
  <p>Code I have - below</p>
  <pre><code>public var body: some View {
          VStack(spacing: 0.0) {
              VStack {
                  HStack(alignment: .center, spacing: 0) {
                      Image(systemName: &quot;command&quot;)
                          .resizable()
                          .scaledToFit()
                          .frame(width: 20, height: 20)
                          .padding(.leading, 20)
                          .offset(x: 0, y: 1)
                      TextField(&quot;Search Commands&quot;, text: $state.commandQuery)
                          .font(.system(size: 20, weight: .light, design: .default))
                          .textFieldStyle(.plain)
                          .onReceive(
                              state.$commandQuery
                                  .debounce(for: .seconds(0.1), scheduler: DispatchQueue.main)
                          ) { val in
                              state.fetchMatchingCommands(val: val)
                          }
                      .padding(16)
                      .foregroundColor(Color(.systemGray).opacity(0.85))
                      .background(EffectView(.sidebar, blendingMode: .behindWindow))
                  }
              }
              Divider()
              VStack(spacing: 0) {
                  List(state.filteredCommands.isEmpty &amp;&amp; state.commandQuery.isEmpty ?
                       commandManager.commands : state.filteredCommands, selection: $selectedItem) { command in
                          VStack(alignment: .leading, spacing: 0) {
                              Text(command.title).foregroundColor(Color.white)
                                  .padding(EdgeInsets.init(top: 0, leading: 10, bottom: 0, trailing: 0))
                                  .frame(height: 10)
                          }.frame(maxWidth: .infinity, maxHeight: 15, alignment: .leading)
                              .listRowBackground(self.selectedItem == command ?
                                                 RoundedRectangle(cornerRadius: 5, style: .continuous)
                                  .fill(Color(.systemBlue)) :
                                                  RoundedRectangle(cornerRadius: 5, style: .continuous)
                                  .fill(Color.clear) )
  
                          .onTapGesture {
                              self.selectedItem = command
                              callHandler(command: command)
                          }.onHover(perform: { _ in self.selectedItem = command })
                      }.listStyle(SidebarListStyle())
              }
          }
          .background(EffectView(.sidebar, blendingMode: .behindWindow))
          .foregroundColor(.gray)
          .edgesIgnoringSafeArea(.vertical)
          .frame(minWidth: 600,
             minHeight: self.state.isShowingCommandsList ? 400 : 28,
             maxHeight: self.state.isShowingCommandsList ? .infinity : 28)
      }
  </code></pre>
  <p>This is how it looks - and I want to make focus move between found list items</p>
  <p><a href="https://i.stack.imgur.com/n8XxY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n8XxY.png" alt="enter image description here" /></a></p>