Repository: element-plus/element-plus
File: packages/components/autocomplete/src/autocomplete.vue (Vue)

Code before:
  }

  if (index >= suggestions.value.length) {
    index = suggestions.value.length - 1
  }
  const suggestion = regionRef.value!.querySelector(
    `.${ns.be('suggestion', 'wrap')}`
  )!
  const suggestionList = suggestion.querySelectorAll<HTMLElement>(
    `.${ns.be('suggestion', 'list')} li`
  )!
  const highlightItem = suggestionList[index]
  const scrollTop = suggestion.scrollTop
  const { offsetTop, scrollHeight } = highlightItem

  if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {
    suggestion.scrollTop += scrollHeight
  }
  if (offsetTop < scrollTop) {
    suggestion.scrollTop -= scrollHeight
  }
  highlightedIndex.value = index
  inputRef.value!.ref!.setAttribute(
    'aria-activedescendant',
    `${listboxId.value}-item-${highlightedIndex.value}`
  )
}

const stopHandle = onClickOutside(listboxRef, () => {
  // Prevent closing if focus is inside popper content
  if (popperRef.value?.isFocusInsideContent()) return
  suggestionVisible.value && close()
})

onBeforeUnmount(() => {
  stopHandle?.()
})

onMounted(() => {
  const inputElement = inputRef.value!.ref!
  ;[
    { key: 'role', value: 'textbox' },
    { key: 'aria-autocomplete', value: 'list' },
    { key: 'aria-controls', value: 'id' },
    {
      key: 'aria-activedescendant',
      value: `${listboxId.value}-item-${highlightedIndex.value}`,
    },
  ].forEach(({ key, value }) => inputElement.setAttribute(key, value))
  // get readonly attr
  readonly = inputElement.hasAttribute('readonly')

Review comment (suggestion):

```suggestion
  inputRef.value?.ref?.setAttribute(
    'aria-activedescendant',
    `${listboxId.value}-item-${highlightedIndex.value}`
  )
```

Code after:
  }

  if (index >= suggestions.value.length) {
    index = suggestions.value.length - 1
  }
  const suggestion = regionRef.value!.querySelector(
    `.${ns.be('suggestion', 'wrap')}`
  )!
  const suggestionList = suggestion.querySelectorAll<HTMLElement>(
    `.${ns.be('suggestion', 'list')} li`
  )!
  const highlightItem = suggestionList[index]
  const scrollTop = suggestion.scrollTop
  const { offsetTop, scrollHeight } = highlightItem

  if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {
    suggestion.scrollTop += scrollHeight
  }
  if (offsetTop < scrollTop) {
    suggestion.scrollTop -= scrollHeight
  }
  highlightedIndex.value = index
  inputRef.value?.ref?.setAttribute(
    'aria-activedescendant',
    `${listboxId.value}-item-${highlightedIndex.value}`
  )
}

const stopHandle = onClickOutside(listboxRef, () => {
  // Prevent closing if focus is inside popper content
  if (popperRef.value?.isFocusInsideContent()) return
  suggestionVisible.value && close()
})

onBeforeUnmount(() => {
  stopHandle?.()
})

onMounted(() => {
  const inputElement = inputRef.value?.ref
  if (!inputElement) return
  ;[
    { key: 'role', value: 'textbox' },
    { key: 'aria-autocomplete', value: 'list' },
    { key: 'aria-controls', value: 'id' },
    {
      key: 'aria-activedescendant',
      value: `${listboxId.value}-item-${highlightedIndex.value}`,
    },
  ].forEach(({ key, value }) => inputElement.setAttribute(key, value))
  // get readonly attr