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

Code before:
  const suggestionPanelEl = suggestionPanel.value?.$el

  if (!isClient || !inputInner) return

  if (suggestionPanelEl) {
    const suggestionList = suggestionPanelEl.querySelector(
      `.${nsCascader.e('suggestion-list')}`
    )
    suggestionList.style.minWidth = `${inputInner.offsetWidth}px`
  }

  if (tagWrapperEl) {
    const { offsetHeight } = tagWrapperEl
    // 2 is el-input__wrapper padding
    const height =
      tags.value.length > 0
        ? `${Math.max(offsetHeight, inputInitialHeight) - 2}px`
        : `${inputInitialHeight}px`
    inputInner.style.height = height
    // if prefix slot exists, update tagWrapperEl left position
    if (slots.prefix) {
      const prefix = inputRef.value?.$el.querySelector(
        `.${nsInput.e('prefix')}`
      ) as HTMLElement
      if (prefix) {
        tagWrapperEl.style.left = `${prefix.offsetWidth + 11}px`
      }
    } else {
      tagWrapperEl.style.left = `0`
    }
    updatePopperPosition()
  }
}

const getCheckedNodes = (leafOnly: boolean) => {
  return cascaderPanelRef.value?.getCheckedNodes(leafOnly)
}

const handleExpandChange = (value: CascaderValue) => {
  updatePopperPosition()
  emit('expandChange', value)
}

const handleKeyDown = (e: KeyboardEvent) => {
  if (isComposing.value) return
  const code = getEventCode(e)

  switch (code) {
    case EVENT_CODE.enter:
    case EVENT_CODE.numpadEnter:
      togglePopperVisible()

Review comment (suggestion):
I think no offset should be applied when the prefix width is 0, for example in the case of empty nodes or comment nodes. [play](https://element-plus.run/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwibS00XCI+XG4gICAgPHA+RGlzcGxheSBhbGwgdGFncyAoZGVmYXVsdCk8L3A+XG4gICAgPGVsLWNhc2NhZGVyIDpvcHRpb25zPVwib3B0aW9uc1wiIDpwcm9wcz1cInByb3BzXCIgY2xlYXJhYmxlPlxuICAgICAgPHRlbXBsYXRlICNwcmVmaXg+XG4gICAgICAgIDwhLS0gMTIzIC0tPlxuICAgICAgPC90ZW1wbGF0ZT5cbiAgICA8L2VsLWNhc2NhZGVyPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgbGFuZz1cInRzXCIgc2V0dXA+XG5jb25zdCBwcm9wcyA9IHsgbXVsdGlwbGU6IHRydWUgfVxuXG5jb25zdCBvcHRpb25zID0gW1xuICB7XG4gICAgdmFsdWU6IDEsXG4gICAgbGFiZWw6ICdBc2lhJyxcbiAgICBjaGlsZHJlbjogW1xuICAgICAge1xuICAgICAgICB2YWx1ZTogMixcbiAgICAgICAgbGFiZWw6ICdDaGluYScsXG4gICAgICAgIGNoaWxkcmVuOiBbXG4gICAgICAgICAgeyB2YWx1ZTogMywgbGFiZWw6ICdCZWlqaW5nJyB9LFxuICAgICAgICAgIHsgdmFsdWU6IDQsIGxhYmVsOiAnU2hhbmdoYWknIH0sXG4gICAgICAgICAgeyB2YWx1ZTogNSwgbGFiZWw6ICdIYW5nemhvdScgfSxcbiAgICAgICAgXSxcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIHZhbHVlOiA2LFxuICAgICAgICBsYWJlbDogJ0phcGFuJyxcbiAgICAgICAgY2hpbGRyZW46IFtcbiAgICAgICAgICB7IHZhbHVlOiA3LCBsYWJlbDogJ1Rva3lvJyB9LFxuICAgICAgICAgIHsgdmFsdWU6IDgsIGxhYmVsOiAnT3Nha2EnIH0sXG4gICAgICAgICAgeyB2YWx1ZTogOSwgbGFiZWw6ICdLeW90bycgfSxcbiAgICAgICAgXSxcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIHZhbHVlOiAxMCxcbiAgICAgICAgbGFiZWw6ICdLb3JlYScsXG4gICAgICAgIGNoaWxkcmVuOiBbXG4gICAgICAgICAgeyB2YWx1ZTogMTEsIGxhYmVsOiAnU2VvdWwnIH0sXG4gICAgICAgICAgeyB2YWx1ZTogMTIsIGxhYmVsOiAnQnVzYW4nIH0sXG4gICAgICAgICAgeyB2YWx1ZTogMTMsIGxhYmVsOiAnVGFlZ3UnIH0sXG4gICAgICAgIF0sXG4gICAgICB9LFxuICAgIF0sXG4gIH0sXG4gIHtcbiAgICB2YWx1ZTogMTQsXG4gICAgbGFiZWw6ICdFdXJvcGUnLFxuICAgIGNoaWxkcmVuOiBbXG4gICAgICB7XG4gICAgICAgIHZhbHVlOiAxNSxcbiAgICAgICAgbGFiZWw6ICdGcmFuY2UnLFxuICAgICAgICBjaGlsZHJlbjogW1xuICAgICAgICAgIHsgdmFsdWU6IDE2LCBsYWJlbDogJ1BhcmlzJyB9LFxuICAgICAgICAgIHsgdmFsdWU6IDE3LCBsYWJlbDogJ01hcnNlaWxsZScgfSxcbiAgICAgICAgICB7IHZhbHVlOiAxOCwgbGFiZWw6ICdMeW9uJyB9LFxuICAgICAgICBdLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgdmFsdWU6IDE5LFxuICAgICAgICBsYWJlbDogJ1VLJyxcbiAgICAgICAgY2hpbGRyZW46IFtcbiAgICAgICAgICB7IHZhbHVlOiAyMCwgbGFiZWw6ICdMb25kb24nIH0sXG4gICAgICAgICAgeyB2YWx1ZTogMjEsIGxhYmVsOiAnQmlybWluZ2hhbScgfSxcbiAgICAgICAgICB7IHZhbHVlOiAyMiwgbGFiZWw6ICdNYW5jaGVzdGVyJyB9LFxuICAgICAgICBdLFxuICAgICAgfSxcbiAgICBdLFxuICB9LFxuICB7XG4gICAgdmFsdWU6IDIzLFxuICAgIGxhYmVsOiAnTm9ydGggQW1lcmljYScsXG4gICAgY2hpbGRyZW46IFtcbiAgICAgIHtcbiAgICAgICAgdmFsdWU6IDI0LFxuICAgICAgICBsYWJlbDogJ1VTJyxcbiAgICAgICAgY2hpbGRyZW46IFtcbiAgICAgICAgICB7IHZhbHVlOiAyNSwgbGFiZWw6ICdOZXcgWW9yaycgfSxcbiAgICAgICAgICB7IHZhbHVlOiAyNiwgbGFiZWw6ICdMb3MgQW5nZWxlcycgfSxcbiAgICAgICAgICB7IHZhbHVlOiAyNywgbGFiZWw6ICdXYXNoaW5ndG9uJyB9LFxuICAgICAgICBdLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgdmFsdWU6IDI4LFxuICAgICAgICBsYWJlbDogJ0NhbmFkYScsXG4gICAgICAgIGNoaWxkcmVuOiBbXG4gICAgICAgICAgeyB2YWx1ZTogMjksIGxhYmVsOiAnVG9yb250bycgfSxcbiAgICAgICAgICB7IHZhbHVlOiAzMCwgbGFiZWw6ICdNb250cmVhbCcgfSxcbiAgICAgICAgICB7IHZhbHVlOiAzMSwgbGFiZWw6ICdPdHRhd2EnIH0sXG4gICAgICAgIF0sXG4gICAgICB9LFxuICAgIF0sXG4gIH0sXG5dXG48L3NjcmlwdD5cbiIsImVsZW1lbnQtcGx1cy5qcyI6ImltcG9ydCBFbGVtZW50UGx1cyBmcm9tICdlbGVtZW50LXBsdXMnXG5pbXBvcnQgeyBnZXRDdXJyZW50SW5zdGFuY2UgfSBmcm9tICd2dWUnXG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuYXdhaXQgbG9hZFN0eWxlKClcblxuZXhwb3J0IGZ1bmN0aW9uIHNldHVwRWxlbWVudFBsdXMoKSB7XG4gIGlmIChpbnN0YWxsZWQpIHJldHVyblxuICBjb25zdCBpbnN0YW5jZSA9IGdldEN1cnJlbnRJbnN0YW5jZSgpXG4gIGluc3RhbmNlLmFwcENvbnRleHQuYXBwLnVzZShFbGVtZW50UGx1cylcbiAgaW5zdGFsbGVkID0gdHJ1ZVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICBjb25zdCBzdHlsZXMgPSBbJ2h0dHBzOi8vcHJldmlldy0yMzIzNi1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2Rpc3QvaW5kZXguY3NzJywgJ2h0dHBzOi8vcHJldmlldy0yMzIzNi1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL3RoZW1lLWNoYWxrL2RhcmsvY3NzLXZhcnMuY3NzJ10ubWFwKChzdHlsZSkgPT4ge1xuICAgIHJldHVybiBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XG4gICAgICBjb25zdCBsaW5rID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnbGluaycpXG4gICAgICBsaW5rLnJlbCA9ICdzdHlsZXNoZWV0J1xuICAgICAgbGluay5ocmVmID0gc3R5bGVcbiAgICAgIGxpbmsuYWRkRXZlbnRMaXN0ZW5lcignbG9hZCcsIHJlc29sdmUpXG4gICAgICBsaW5rLmFkZEV2ZW50TGlzdGVuZXIoJ2Vycm9yJywgcmVqZWN0KVxuICAgICAgZG9jdW1lbnQuYm9keS5hcHBlbmQobGluaylcbiAgICB9KVxuICB9KVxuICByZXR1cm4gUHJvbWlzZS5hbGxTZXR0bGVkKHN0eWxlcylcbn1cbiIsInRzY29uZmlnLmpzb24iOiJ7XG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcbiAgICBcInR5cGVzXCI6IFtcImVsZW1lbnQtcGx1cy9nbG9iYWwuZC50c1wiXSxcbiAgICBcImFsbG93SW1wb3J0aW5nVHNFeHRlbnNpb25zXCI6IHRydWUsXG4gICAgXCJhbGxvd0pzXCI6IHRydWUsXG4gICAgXCJjaGVja0pzXCI6IHRydWVcbiAgfSxcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IDMuM1xuICB9XG59XG4iLCJQbGF5Z3JvdW5kTWFpbi52dWUiOiI8c2NyaXB0IHNldHVwPlxuaW1wb3J0IEFwcCBmcm9tICcuL0FwcC52dWUnXG5pbXBvcnQgeyBzZXR1cEVsZW1lbnRQbHVzIH0gZnJvbSAnLi9lbGVtZW50LXBsdXMuanMnXG5zZXR1cEVsZW1lbnRQbHVzKClcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxBcHAgLz5cbjwvdGVtcGxhdGU+XG4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0B2dWUvcnVudGltZS1kb21AbGF0ZXN0L2Rpc3QvcnVudGltZS1kb20uZXNtLWJyb3dzZXIuanNcIixcbiAgICBcIkB2dWUvc2hhcmVkXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AdnVlL3NoYXJlZEBsYXRlc3QvZGlzdC9zaGFyZWQuZXNtLWJ1bmRsZXIuanNcIixcbiAgICBcImVsZW1lbnQtcGx1c1wiOiBcImh0dHBzOi8vcHJldmlldy0yMzIzNi1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2Rpc3QvaW5kZXguZnVsbC5taW4ubWpzXCIsXG4gICAgXCJlbGVtZW50LXBsdXMvXCI6IFwidW5zdXBwb3J0ZWRcIixcbiAgICBcIkBlbGVtZW50LXBsdXMvaWNvbnMtdnVlXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AZWxlbWVudC1wbHVzL2ljb25zLXZ1ZUAyL2Rpc3QvaW5kZXgubWluLmpzXCJcbiAgfSxcbiAgXCJzY29wZXNcIjoge31cbn0iLCJfbyI6eyJzaG93SGlkZGVuIjp0cnVlLCJzdHlsZVNvdXJjZSI6Imh0dHBzOi8vcHJldmlldy0yMzIzNi1lbGVtZW50LXBsdXMuc3VyZ2Uuc2gvYnVuZGxlL2Rpc3QvaW5kZXguY3NzIn19)

Code after:
}

const updateStyle = () => {
  const inputInner = inputRef.value?.input
  const tagWrapperEl = tagWrapper.value
  const suggestionPanelEl = suggestionPanel.value?.$el

  if (!isClient || !inputInner) return

  if (suggestionPanelEl) {
    const suggestionList = suggestionPanelEl.querySelector(
      `.${nsCascader.e('suggestion-list')}`
    )
    suggestionList.style.minWidth = `${inputInner.offsetWidth}px`
  }

  if (tagWrapperEl) {
    const { offsetHeight } = tagWrapperEl
    // 2 is el-input__wrapper padding
    const height =
      tags.value.length > 0
        ? `${Math.max(offsetHeight, inputInitialHeight) - 2}px`
        : `${inputInitialHeight}px`
    inputInner.style.height = height
    // if prefix slot exists, update tagWrapperEl left position
    if (slots.prefix) {
      const prefix = inputRef.value?.$el.querySelector(
        `.${nsInput.e('prefix')}`
      ) as HTMLElement
      let left = 0
      if (prefix) {
        left = prefix.offsetWidth
        if (left > 0) {
          left += sizeMapPadding[realSize.value || 'default'] // this is the default padding of el-input__wrapper
        }
      }
      tagWrapperEl.style.left = `${left}px`
    } else {
      tagWrapperEl.style.left = `0`
    }
    updatePopperPosition()
  }
}

const getCheckedNodes = (leafOnly: boolean) => {
  return cascaderPanelRef.value?.getCheckedNodes(leafOnly)
}

const handleExpandChange = (value: CascaderValue) => {
  updatePopperPosition()
  emit('expandChange', value)