Purvank Jawade
Purvank Jawade

Reputation: 1

I'm wrote a typescript code for list selection up and down using keyboard up and down arrow key. Now I facing one item skipping issue

scrollToSelected(idPrefix: string, index: number) { const selectedEl = document.getElementById(${idPrefix}-${index}) selectedEl?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }) }, handleKeydown( event: KeyboardEvent, listName: ListName, list: any[], selectCallback: (item: any) => void, idPrefix: string ) { const length = list.length if (!length) return

            const currentIndex = this.selectedIndices[listName]

            if (event.key === 'ArrowDown') {
                event.preventDefault()
                this.selectedIndices[listName] = (currentIndex + 1) % length
                this.scrollToSelected(idPrefix, this.selectedIndices[listName])
            } else if (event.key === 'ArrowUp') {
                event.preventDefault()
                this.selectedIndices[listName] = (currentIndex - 1 + length) % length
                this.scrollToSelected(idPrefix, this.selectedIndices[listName])
            } else if (event.key === 'Enter' && currentIndex >= 0) {
                event.preventDefault()
                selectCallback(list[currentIndex])
            }
        },
        handleKeydownWrapper(event: KeyboardEvent) {
            if (this.isOpenTargetList) {
                this.handleKeydown(
                    event,
                    'targets',
                    this.getTargetsList,
                    this.selectTargetData,
                    'targets-item'
                )
            } else if (this.isOpenTimeZone) {
                this.handleKeydown(
                    event,
                    'timeZone',
                    this.getTimeZoneList,
                    this.selectTimeZone,
                    'timezone-item'
                )
            } else if (this.isOpenScheduleDate) {
                this.handleKeydown(
                    event,
                    'scheduleDate',
                    this.getScheduleDateList,
                    this.selectScheduleDate,
                    'schedule-date-item'
                )
            } else if (this.isOpenScheduleTime) {
                this.handleKeydown(
                    event,
                    'scheduleTime',
                    this.getTimeList,
                    this.selectTime,
                    'schedule-time-item'
                )
            } else if (this.isOpenRepeat) {
                this.handleKeydown(
                    event,
                    'repeat',
                    this.repeatList,
                    this.selectRepeatCycle,
                    'repeat-item'
                )
            } else if (this.isOpenTargetTemplates) {
                this.handleKeydown(
                    event,
                    'targetTemplates',
                    this.getTemplateList,
                    this.selectTemplate,
                    'template-item'
                )
            }
        },

Upvotes: -1

Views: 12

Answers (0)

Related Questions