ronantakizawa/codereview-bench huggingface dataset:
Repository: element-plus/element-plus
File: packages/components/select/src/useSelect.ts (TypeScript)

Code before:
      case EVENT_CODE.enter:
        selectOption()
        break
      case EVENT_CODE.esc:
        handleEsc()
        break
      case EVENT_CODE.backspace:
        isPreventDefault = false
        deletePrevTag(e)
        return
      case EVENT_CODE.home:
        if (!expanded.value) return
        focusOption(0, 'down')
        break
      case EVENT_CODE.end:
        if (!expanded.value) return
        focusOption(states.options.size - 1, 'up')
        break
      case EVENT_CODE.pageUp:
        if (!expanded.value) return
        focusOption(Math.max(0, states.hoveringIndex - 10), 'up')
        break
      case EVENT_CODE.pageDown:
        if (!expanded.value) return
        focusOption(
          Math.min(states.options.size - 1, states.hoveringIndex + 10),
          'down'
        )
        break
      default:
        isPreventDefault = false
        break
    }
    if (isPreventDefault) {
      e.preventDefault()
      e.stopPropagation()
    }
  }

  const getGapWidth = () => {
    if (!selectionRef.value) return 0
    const style = window.getComputedStyle(selectionRef.value)
    return Number.parseFloat(style.gap || '6px')
  }

  // computed style
  const tagStyle = computed(() => {
    const gapWidth = getGapWidth()
    const inputSlotWidth = props.filterable ? gapWidth + MINIMUM_INPUT_WIDTH : 0
    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1

Review comment (suggestion):
Same as above

```suggestion
          states.hoveringIndex + 10,
```

Code after:
        if (!expanded.value) return
        focusOption(0, 'down')
        break
      case EVENT_CODE.end:
        if (!expanded.value) return
        focusOption(states.options.size - 1, 'up')
        break
      case EVENT_CODE.pageUp:
        if (!expanded.value) return
        focusOption(states.hoveringIndex - 10, 'up')
        break
      case EVENT_CODE.pageDown:
        if (!expanded.value) return
        focusOption(states.hoveringIndex + 10, 'down')
        break
      default:
        isPreventDefault = false
        break
    }
    if (isPreventDefault) {
      e.preventDefault()
      e.stopPropagation()
    }
  }

  const getGapWidth = () => {
    if (!selectionRef.value) return 0
    const style = window.getComputedStyle(selectionRef.value)
    return Number.parseFloat(style.gap || '6px')
  }

  // computed style
  const tagStyle = computed(() => {
    const gapWidth = getGapWidth()
    const inputSlotWidth = props.filterable ? gapWidth + MINIMUM_INPUT_WIDTH : 0
    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.selectionWidth -
          states.collapseItemWidth -
          gapWidth -
          inputSlotWidth
        : states.selectionWidth - inputSlotWidth
    return { maxWidth: `${maxWidth}px` }
  })

  const collapseTagStyle = computed(() => {
    return { maxWidth: `${states.selectionWidth}px` }
  })

  const popupScroll = (data: { scrollTop: number; scrollLeft: number }) => {
    emit('popup-scroll', data)
Repository: element-plus/element-plus
File: packages/components/select-v2/src/useSelect.ts (TypeScript)

Code before:
      filteredOptions.value[states.hoveringIndex]
    ) {
      onSelect(filteredOptions.value[states.hoveringIndex])
    }
  }

  const onHoverOption = (idx?: number) => {
    states.hoveringIndex = idx ?? -1
  }

  const updateHoveringIndex = () => {
    if (!props.multiple) {
      states.hoveringIndex = filteredOptions.value.findIndex((item) => {
        return getValueKey(getValue(item)) === getValueKey(props.modelValue)
      })
    } else {
      states.hoveringIndex = filteredOptions.value.findIndex((item) =>
        props.modelValue.some(
          (modelValue: unknown) =>
            getValueKey(modelValue) === getValueKey(getValue(item))
        )
      )
    }
  }

  const isDebouncing = ref(false)

  const onInputChange = () => {
    if (states.inputValue.length > 0 && !expanded.value) {
      expanded.value = true
    }
    createNewOption(states.inputValue)
    nextTick(() => {
      handleQueryChange(states.inputValue)
    })
  }

  const debouncedOnInputChange = useDebounceFn(() => {
    onInputChange()
    isDebouncing.value = false
  }, debounce)

  const onInput = (event: Event) => {
    states.inputValue = (event.target as HTMLInputElement).value
    if (props.remote) {
      isDebouncing.value = true
      debouncedOnInputChange()
    } else {
      return onInputChange()
    }
  }

Review comment (suggestion):
```suggestion
  const debouncing = ref(false)
```

Can you set the declaration in the refs definition too please.

Code after:
    }
    const option = options[newIndex]
    if (getDisabled(option) || option.type === 'Group') {
      // prevent dispatching multiple nextTick callbacks.
      return onKeyboardNavigate(direction, newIndex)
    } else {
      states.hoveringIndex = newIndex
      scrollToItem(newIndex)
    }
  }

  const onKeyboardSelect = () => {
    if (!expanded.value) {
      return toggleMenu()
    } else if (
      ~states.hoveringIndex &&
      filteredOptions.value[states.hoveringIndex]
    ) {
      onSelect(filteredOptions.value[states.hoveringIndex])
    }
  }

  const onHoverOption = (idx?: number) => {
    states.hoveringIndex = idx ?? -1
  }

  const updateHoveringIndex = () => {
    if (!props.multiple) {
      states.hoveringIndex = filteredOptions.value.findIndex((item) => {
        return getValueKey(getValue(item)) === getValueKey(props.modelValue)
      })
    } else {
      states.hoveringIndex = filteredOptions.value.findIndex((item) =>
        props.modelValue.some(
          (modelValue: unknown) =>
            getValueKey(modelValue) === getValueKey(getValue(item))
        )
      )
    }
  }

  const onInput = (event: Event) => {
    states.inputValue = (event.target as HTMLInputElement).value
    if (props.remote) {
      debouncing.value = true
      debouncedOnInputChange()
    } else {
      return onInputChange()
    }
  }
Repository: element-plus/element-plus
File: packages/components/input-tag/src/composables/use-input-tag.ts (TypeScript)

Code before:
      case EVENT_CODE.numpadEnter:
        if (props.trigger === EVENT_CODE.enter) {
          if (inputVal) {
            event.preventDefault()
            event.stopPropagation()
            handleAddTag()
          }
        }
        break
      case EVENT_CODE.backspace:
        if (!inputValue.value && props.modelValue?.length) {
          event.preventDefault()
          event.stopPropagation()
          handleRemoveTag(props.modelValue.length - 1)
        }
        break
    }
  }

  const handleKeyup = (event: KeyboardEvent) => {
    if (isComposing.value || !isAndroid()) return
    const code = getEventCode(event)
    const key = getEventKey(event)

    if (code === EVENT_CODE.space || key === ' ') {
      return
    }
  }

  const handleAddTag = () => {
    const value = inputValue.value?.trim()
    if (!value || inputLimit.value) return
    addTagsEmit(value)
  }

  const handleRemoveTag = (index: number) => {
    const value = (props.modelValue ?? []).slice()
    const [item] = value.splice(index, 1)

    emit(UPDATE_MODEL_EVENT, value)
    emit(CHANGE_EVENT, value)
    emit('remove-tag', item, index)
  }

  const handleClear = () => {
    inputValue.value = undefined
    emit(UPDATE_MODEL_EVENT, undefined)
    emit(CHANGE_EVENT, undefined)
    emit('clear')
  }


Review comment (suggestion):
When the `props.trigger` is the `EVENT_CODE.space` on Android, the `handleAddTag` function cannot be performed in keydown. It is necessary to perform the `handleAddTag` function here according to the situation.

Code after:
          handleAddTag()
        }
        break
      case EVENT_CODE.backspace:
        if (!inputValue.value && props.modelValue?.length) {
          event.preventDefault()
          event.stopPropagation()
          handleRemoveTag(props.modelValue.length - 1)
        }
        break
    }
  }

  const handleKeyup = (event: KeyboardEvent) => {
    if (isComposing.value || !isAndroid()) return
    const code = getEventCode(event)

    switch (code) {
      case EVENT_CODE.space:
        if (props.trigger === EVENT_CODE.space) {
          event.preventDefault()
          event.stopPropagation()
          handleAddTag()
        }
        break
    }
  }

  const handleAddTag = () => {
    const value = inputValue.value?.trim()
    if (!value || inputLimit.value) return
    addTagsEmit(value)
  }

  const handleRemoveTag = (index: number) => {
    const value = (props.modelValue ?? []).slice()
    const [item] = value.splice(index, 1)

    emit(UPDATE_MODEL_EVENT, value)
    emit(CHANGE_EVENT, value)
    emit('remove-tag', item, index)
  }

  const handleClear = () => {
    inputValue.value = undefined
    emit(UPDATE_MODEL_EVENT, undefined)
    emit(CHANGE_EVENT, undefined)
    emit('clear')
  }

  const handleDragged = (
Repository: element-plus/element-plus
File: packages/components/tree-select/__tests__/tree-select.test.tsx (TypeScript)

Code before:

beforeEach(() => {
  document.body.innerHTML = ''
})

afterEach(async () => {
  mountedWrappers.forEach((wrapper) => {
    if (wrapper && wrapper.exists()) {
      wrapper.unmount()
    }
  })
  mountedWrappers.length = 0
  document.body.innerHTML = ''
  vi.clearAllTimers()

  const clearAnimationFrames = () => {
    let id = 1
    while (id < 1000) {
      try {
        window.cancelAnimationFrame(id)
      } catch {
        // Ignore errors
      }
      id++
    }
  }
  clearAnimationFrames()
  await new Promise((resolve) => setTimeout(resolve, 0))
})

const createComponent = ({
  slots = {},
  props = {},
}: {
  slots?: Record<string, any>
  props?: (typeof TreeSelect)['props']
} = {}) => {
  const wrapperRef = ref<TreeSelectInstance>()
  const defaultData = ref([
    {
      value: 1,
      label: '一级 1',
      children: [
        {
          value: 11,
          label: '二级 1-1',
          children: [
            {
              value: 111,
              label: '三级 1-1',
            },

Review comment (suggestion):
You seem to want to clear all calls to `requestAniamtionFrame`, but this approach does not seem reasonable. Perhaps intercepting `cancelAnimationFrame` and `requestAniamtionFrame` is more reasonable.

```ts
const frameIds = new Set();
const originalRequestAnimationFrame = global.requestAnimationFrame;
global.requestAnimationFrame = function(cb) {
  const id = originalRequestAnimationFrame(() => {
    frameIds.delete(id)
  })
  frameIds.add(id)
  return id
}

function cancelAllAnimationFrames() {
  frameIds.forEach(id =>global.cancelAnimationFrame(id))
  frameIds.clear()
}
```

Code after:

// Keep track of all mounted wrappers for cleanup
const mountedWrappers: VueWrapper<any>[] = []

beforeEach(() => {
  document.body.innerHTML = ''
})

afterEach(async () => {
  mountedWrappers.forEach((wrapper) => {
    if (wrapper && wrapper.exists()) {
      wrapper.unmount()
    }
  })
  mountedWrappers.length = 0
  document.body.innerHTML = ''
  vi.clearAllTimers()

  const frameIds = new Set<number>()
  const originalRequestAnimationFrame = global.requestAnimationFrame

  global.requestAnimationFrame = function (cb) {
    const id = originalRequestAnimationFrame((timestamp) => {
      frameIds.delete(id)
      cb(timestamp)
    })
    frameIds.add(id)
    return id
  }

  const cancelAllAnimationFrames = () => {
    frameIds.forEach((id) => global.cancelAnimationFrame(id))
    frameIds.clear()
  }

  cancelAllAnimationFrames()
  await new Promise((resolve) => setTimeout(resolve, 0))
})

const createComponent = ({
  slots = {},
  props = {},
}: {
  slots?: Record<string, any>
  props?: (typeof TreeSelect)['props']
} = {}) => {
  const wrapperRef = ref<TreeSelectInstance>()
  const defaultData = ref([
    {
      value: 1,
      label: '一级 1',
Repository: element-plus/element-plus
File: packages/components/tree/src/tree.ts (TypeScript)

Code before:
import { isBoolean } from '@element-plus/utils'

import type { ComponentInternalInstance } from 'vue'
import type { EmitFn } from '@element-plus/utils'
import type Node from './model/node'
import type { CheckedInfo, NodeDropType, TreeNodeData } from './tree.type'

/* eslint-disable @typescript-eslint/no-unused-vars */
export const treeEmits = {
  'check-change': (
    data: TreeNodeData,
    checked: boolean,
    indeterminate: boolean
  ) => data && isBoolean(checked) && isBoolean(indeterminate),
  'current-change': (data: TreeNodeData | null, node: Node | null) => true,
  'node-click': (
    data: TreeNodeData,
    node: Node,
    nodeInstance: ComponentInternalInstance | null,
    event: MouseEvent
  ) => data && node && event instanceof Event,
  'node-contextmenu': (
    event: Event,
    data: TreeNodeData,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => event instanceof Event && data && node,
  'node-collapse': (
    data: TreeNodeData,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  'node-expand': (
    data: TreeNodeData,
    node: Node,
    nodeInstance: ComponentInternalInstance | null

Review comment (suggestion):
TreeNodeData will have a conflict with other interface created by the developer.

Perhaps we can leave these fields to `any` until a fully generic support (?)

Code after:
import { isBoolean } from '@element-plus/utils'

import type { ComponentInternalInstance } from 'vue'
import type { EmitFn } from '@element-plus/utils'
import type Node from './model/node'
import type { CheckedInfo, NodeDropType } from './tree.type'

/* eslint-disable @typescript-eslint/no-unused-vars */
export const treeEmits = {
  'check-change': (data: any, checked: boolean, indeterminate: boolean) =>
    data && isBoolean(checked) && isBoolean(indeterminate),
  'current-change': (data: any | null, node: Node | null) => true,
  'node-click': (
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null,
    evt: MouseEvent
  ) => data && node && evt instanceof Event,
  'node-contextmenu': (
    evt: Event,
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => evt instanceof Event && data && node,
  'node-collapse': (
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  'node-expand': (
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  check: (data: any, checkedInfo: CheckedInfo) => data && checkedInfo,
  'node-drag-start': (node: Node, evt: DragEvent) => node && evt,
Repository: element-plus/element-plus
File: packages/components/tree/src/tree.ts (TypeScript)

Code before:
    event: MouseEvent
  ) => data && node && event instanceof Event,
  'node-contextmenu': (
    event: Event,
    data: TreeNodeData,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => event instanceof Event && data && node,
  'node-collapse': (
    data: TreeNodeData,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  'node-expand': (
    data: TreeNodeData,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  check: (data: TreeNodeData, checkedInfo: CheckedInfo) => data && checkedInfo,
  'node-drag-start': (node: Node, event: DragEvent) =>
    node && event instanceof DragEvent,
  'node-drag-end': (
    draggingNode: Node,
    dropNode: Node | null,
    dropType: NodeDropType | null,
    event: DragEvent
  ) => draggingNode && event instanceof DragEvent,
  'node-drop': (
    draggingNode: Node,
    dropNode: Node,
    dropType: Exclude<NodeDropType, 'none'> | null,
    event: DragEvent
  ) => draggingNode && dropNode && event instanceof DragEvent,
  'node-drag-leave': (
    draggingNode: Node,
    oldDropNode: Node,
    event: DragEvent
  ) => draggingNode && oldDropNode && event instanceof DragEvent,
  'node-drag-enter': (draggingNode: Node, dropNode: Node, event: DragEvent) =>
    draggingNode && dropNode && event instanceof DragEvent,
  'node-drag-over': (draggingNode: Node, dropNode: Node, event: DragEvent) =>
    draggingNode && dropNode && event instanceof DragEvent,
}
/* eslint-enable @typescript-eslint/no-unused-vars */

export type TreeEmits = EmitFn<typeof treeEmits>


Review comment (suggestion):
In this example https://github.com/element-plus/element-plus/blob/dev/docs/examples/tree/draggable.vue#L22 we pass `DragEvents`, it can be deleted.

Code after:
    evt: Event,
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => evt instanceof Event && data && node,
  'node-collapse': (
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  'node-expand': (
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  check: (data: any, checkedInfo: CheckedInfo) => data && checkedInfo,
  'node-drag-start': (node: Node, evt: DragEvent) => node && evt,
  'node-drag-end': (
    draggingNode: Node,
    dropNode: Node | null,
    dropType: NodeDropType,
    evt: DragEvent
  ) => draggingNode && evt,
  'node-drop': (
    draggingNode: Node,
    dropNode: Node,
    dropType: Exclude<NodeDropType, 'none'>,
    evt: DragEvent
  ) => draggingNode && dropNode && evt,
  'node-drag-leave': (draggingNode: Node, oldDropNode: Node, evt: DragEvent) =>
    draggingNode && oldDropNode && evt,
  'node-drag-enter': (draggingNode: Node, dropNode: Node, evt: DragEvent) =>
    draggingNode && dropNode && evt,
  'node-drag-over': (draggingNode: Node, dropNode: Node, evt: DragEvent) =>
    draggingNode && dropNode && evt,
}
/* eslint-enable @typescript-eslint/no-unused-vars */

export type TreeEmits = EmitFn<typeof treeEmits>
Repository: element-plus/element-plus
File: packages/components/tree/src/tree.ts (TypeScript)

Code before:
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  check: (data: any, checkedInfo: CheckedInfo) => data && checkedInfo,
  'node-drag-start': (node: Node, event: DragEvent) => node && event,
  'node-drag-end': (
    draggingNode: Node,
    dropNode: Node | null,
    dropType: NodeDropType,
    event: DragEvent
  ) => draggingNode && event,
  'node-drop': (
    draggingNode: Node,
    dropNode: Node,
    dropType: Exclude<NodeDropType, 'none'>,
    event: DragEvent
  ) => draggingNode && dropNode && event,
  'node-drag-leave': (
    draggingNode: Node,
    oldDropNode: Node,
    event: DragEvent
  ) => draggingNode && oldDropNode && event,
  'node-drag-enter': (draggingNode: Node, dropNode: Node, event: DragEvent) =>
    draggingNode && dropNode && event,
  'node-drag-over': (draggingNode: Node, dropNode: Node, event: DragEvent) =>
    draggingNode && dropNode && event,
}
/* eslint-enable @typescript-eslint/no-unused-vars */

export type TreeEmits = EmitFn<typeof treeEmits>


Review comment (refactor):
```suggestion
  'node-drag-over': (draggingNode: Node, dropNode: Node, eve: DragEvent) =>
```

<img width="1244" height="205" alt="Image" src="https://github.com/user-attachments/assets/019bb811-7aa5-46ce-b522-cc72a0886df6" />

The name of the event-related parameter is changed to `eve`, otherwise there seems to be duplicate parameter names. refer to #17545

Code after:
    data: any,
    node: Node,
    nodeInstance: ComponentInternalInstance | null
  ) => data && node,
  check: (data: any, checkedInfo: CheckedInfo) => data && checkedInfo,
  'node-drag-start': (node: Node, evt: DragEvent) => node && evt,
  'node-drag-end': (
    draggingNode: Node,
    dropNode: Node | null,
    dropType: NodeDropType,
    evt: DragEvent
  ) => draggingNode && evt,
  'node-drop': (
    draggingNode: Node,
    dropNode: Node,
    dropType: Exclude<NodeDropType, 'none'>,
    evt: DragEvent
  ) => draggingNode && dropNode && evt,
  'node-drag-leave': (draggingNode: Node, oldDropNode: Node, evt: DragEvent) =>
    draggingNode && oldDropNode && evt,
  'node-drag-enter': (draggingNode: Node, dropNode: Node, evt: DragEvent) =>
    draggingNode && dropNode && evt,
  'node-drag-over': (draggingNode: Node, dropNode: Node, evt: DragEvent) =>
    draggingNode && dropNode && evt,
}
/* eslint-enable @typescript-eslint/no-unused-vars */

export type TreeEmits = EmitFn<typeof treeEmits>
Repository: element-plus/element-plus
File: packages/components/color-picker-panel/src/composables/use-predefine.ts (TypeScript)

Code before:
import type { Ref } from 'vue'

export const usePredefine = (props: PredefineProps) => {
  const { currentColor } = inject(colorPickerPanelContextKey)!

  const rgbaColors = ref(parseColors(props.colors, props.color)) as Ref<Color[]>

  watch(
    () => currentColor.value,
    (val) => {
      const color = new Color({
        value: val,
      })

      rgbaColors.value.forEach((item) => {
        item.selected = color.compare(item)
      })
    }
  )

  watchEffect(() => {
    rgbaColors.value = parseColors(props.colors, props.color)
  })

  function handleSelect(index: number) {
    if (props.disabled) return
    props.color.fromString(props.colors[index])
  }

  function parseColors(colors: string[], color: Color) {
    return colors.map((value) => {
      const c = new Color({
        value,
        enableAlpha: props.enableAlpha,
      })
      c.selected = c.compare(color)
      return c
    })
  }

  return {
    rgbaColors,
    handleSelect,
  }
}

export const usePredefineDOM = (props: PredefineProps) => {
  const ns = useNamespace('color-predefine')

  const rootKls = computed(() => [ns.b(), ns.is('disabled', props.disabled)])


Review comment (suggestion):
Now the button already handle disabled.

```suggestion
```

Code after:
import type { Ref } from 'vue'

export const usePredefine = (props: PredefineProps) => {
  const { currentColor } = inject(colorPickerPanelContextKey)!

  const rgbaColors = ref(parseColors(props.colors, props.color)) as Ref<Color[]>

  watch(
    () => currentColor.value,
    (val) => {
      const color = new Color({
        value: val,
        enableAlpha: props.enableAlpha,
      })

      rgbaColors.value.forEach((item) => {
        item.selected = color.compare(item)
      })
    }
  )

  watchEffect(() => {
    rgbaColors.value = parseColors(props.colors, props.color)
  })

  function handleSelect(index: number) {
    props.color.fromString(props.colors[index])
  }

  function parseColors(colors: string[], color: Color) {
    return colors.map((value) => {
      const c = new Color({
        value,
        enableAlpha: props.enableAlpha,
      })
      c.selected = c.compare(color)
      return c
    })
  }

  return {
    rgbaColors,
    handleSelect,
  }
}

export const usePredefineDOM = (props: PredefineProps) => {
  const ns = useNamespace('color-predefine')

  const rootKls = computed(() => [ns.b(), ns.is('disabled', props.disabled)])