mirror of
https://github.com/element-plus/element-plus.git
synced 2025-03-07 15:47:57 +08:00
fix(components): [select] input width fills the remaining width (#19292)
* fix(components): [select] input width fills the remaining width closed #17886 * fix: type
This commit is contained in:
qiang
GitHub
parent
52ee847ff8
commit
1ca9d9c3fa
@ -20,7 +20,6 @@ export type SelectStates = {
|
||||
hoveringIndex: number
|
||||
inputHovering: boolean
|
||||
selectionWidth: number
|
||||
calculatorWidth: number
|
||||
collapseItemWidth: number
|
||||
previousQuery: string | null
|
||||
previousValue: unknown
|
||||
|
||||
@ -283,6 +283,7 @@ import { ClickOutside } from '@element-plus/directives'
|
||||
import ElTooltip from '@element-plus/components/tooltip'
|
||||
import ElTag from '@element-plus/components/tag'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
import { useCalcInputWidth } from '@element-plus/hooks'
|
||||
import ElSelectMenu from './select-dropdown'
|
||||
import useSelect from './useSelect'
|
||||
import { SelectProps, selectEmits } from './defaults'
|
||||
@ -318,6 +319,8 @@ export default defineComponent({
|
||||
}),
|
||||
emit
|
||||
)
|
||||
const { calculatorRef, inputStyle } = useCalcInputWidth()
|
||||
|
||||
provide(selectV2InjectionKey, {
|
||||
props: reactive({
|
||||
...toRefs(props),
|
||||
@ -343,6 +346,8 @@ export default defineComponent({
|
||||
...API,
|
||||
modelValue,
|
||||
selectedLabel,
|
||||
calculatorRef,
|
||||
inputStyle,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -52,8 +52,6 @@ import type { TooltipInstance } from '@element-plus/components/tooltip'
|
||||
import type { SelectDropdownInstance } from './select-dropdown'
|
||||
import type { Component, ComputedRef, Ref, WritableComputedRef } from 'vue'
|
||||
|
||||
const MINIMUM_INPUT_WIDTH = 11
|
||||
|
||||
type useSelectReturnType = (
|
||||
props: ISelectV2Props,
|
||||
emit: SelectEmitFn
|
||||
@ -71,7 +69,6 @@ type useSelectReturnType = (
|
||||
iconReverse: ComputedRef<any>
|
||||
tagStyle: ComputedRef<{ maxWidth: string }>
|
||||
collapseTagStyle: ComputedRef<{ maxWidth: string }>
|
||||
inputStyle: ComputedRef<{ width: string }>
|
||||
popperSize: Ref<number>
|
||||
dropdownMenuVisible: WritableComputedRef<boolean>
|
||||
hasModelValue: ComputedRef<boolean>
|
||||
@ -84,7 +81,6 @@ type useSelectReturnType = (
|
||||
isFocused: Ref<boolean>
|
||||
nsSelect: ReturnType<typeof useNamespace>
|
||||
nsInput: ReturnType<typeof useNamespace>
|
||||
calculatorRef: Ref<HTMLElement | undefined>
|
||||
inputRef: Ref<HTMLElement | undefined>
|
||||
menuRef: Ref<SelectDropdownInstance | undefined>
|
||||
tagMenuRef: Ref<HTMLElement | undefined>
|
||||
@ -116,7 +112,6 @@ type useSelectReturnType = (
|
||||
handleMenuEnter: () => void
|
||||
handleResize: () => void
|
||||
resetSelectionWidth: () => void
|
||||
resetCalculatorWidth: () => void
|
||||
updateTooltip: () => void
|
||||
updateTagTooltip: () => void
|
||||
updateOptions: () => void
|
||||
@ -158,7 +153,6 @@ const useSelect: useSelectReturnType = (
|
||||
hoveringIndex: -1,
|
||||
inputHovering: false,
|
||||
selectionWidth: 0,
|
||||
calculatorWidth: 0,
|
||||
collapseItemWidth: 0,
|
||||
previousQuery: null,
|
||||
previousValue: undefined,
|
||||
@ -176,7 +170,6 @@ const useSelect: useSelectReturnType = (
|
||||
const tooltipRef = ref<TooltipInstance>()
|
||||
const tagTooltipRef = ref<TooltipInstance>()
|
||||
const inputRef = ref<HTMLElement>()
|
||||
const calculatorRef = ref<HTMLElement>()
|
||||
const prefixRef = ref<HTMLElement>()
|
||||
const suffixRef = ref<HTMLElement>()
|
||||
const menuRef = ref<SelectDropdownInstance>()
|
||||
@ -410,10 +403,6 @@ const useSelect: useSelectReturnType = (
|
||||
return { maxWidth: `${states.selectionWidth}px` }
|
||||
})
|
||||
|
||||
const inputStyle = computed(() => ({
|
||||
width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`,
|
||||
}))
|
||||
|
||||
const shouldShowPlaceholder = computed(() => {
|
||||
if (isArray(props.modelValue)) {
|
||||
return props.modelValue.length === 0 && !states.inputValue
|
||||
@ -603,10 +592,6 @@ const useSelect: useSelectReturnType = (
|
||||
states.selectionWidth = selectionRef.value!.getBoundingClientRect().width
|
||||
}
|
||||
|
||||
const resetCalculatorWidth = () => {
|
||||
states.calculatorWidth = calculatorRef.value!.getBoundingClientRect().width
|
||||
}
|
||||
|
||||
const resetCollapseItemWidth = () => {
|
||||
states.collapseItemWidth =
|
||||
collapseItemRef.value!.getBoundingClientRect().width
|
||||
@ -1019,7 +1004,6 @@ const useSelect: useSelectReturnType = (
|
||||
})
|
||||
useResizeObserver(selectRef, handleResize)
|
||||
useResizeObserver(selectionRef, resetSelectionWidth)
|
||||
useResizeObserver(calculatorRef, resetCalculatorWidth)
|
||||
useResizeObserver(menuRef, updateTooltip)
|
||||
useResizeObserver(wrapperRef, updateTooltip)
|
||||
useResizeObserver(tagMenuRef, updateTagTooltip)
|
||||
@ -1040,7 +1024,6 @@ const useSelect: useSelectReturnType = (
|
||||
iconReverse,
|
||||
tagStyle,
|
||||
collapseTagStyle,
|
||||
inputStyle,
|
||||
popperSize,
|
||||
dropdownMenuVisible,
|
||||
hasModelValue,
|
||||
@ -1055,7 +1038,6 @@ const useSelect: useSelectReturnType = (
|
||||
nsInput,
|
||||
|
||||
// refs items exports
|
||||
calculatorRef,
|
||||
inputRef,
|
||||
menuRef,
|
||||
tagMenuRef,
|
||||
@ -1091,7 +1073,6 @@ const useSelect: useSelectReturnType = (
|
||||
handleMenuEnter,
|
||||
handleResize,
|
||||
resetSelectionWidth,
|
||||
resetCalculatorWidth,
|
||||
updateTooltip,
|
||||
updateTagTooltip,
|
||||
updateOptions,
|
||||
|
||||
@ -303,6 +303,7 @@ import ElTag from '@element-plus/components/tag'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
|
||||
import { isArray } from '@element-plus/utils'
|
||||
import { useCalcInputWidth } from '@element-plus/hooks'
|
||||
import ElOption from './option.vue'
|
||||
import ElSelectMenu from './select-dropdown.vue'
|
||||
import { useSelect } from './useSelect'
|
||||
@ -356,6 +357,7 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
const API = useSelect(_props, emit)
|
||||
const { calculatorRef, inputStyle } = useCalcInputWidth()
|
||||
|
||||
provide(
|
||||
selectKey,
|
||||
@ -382,6 +384,8 @@ export default defineComponent({
|
||||
...API,
|
||||
modelValue,
|
||||
selectedLabel,
|
||||
calculatorRef,
|
||||
inputStyle,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -51,8 +51,6 @@ import {
|
||||
import type ElTooltip from '@element-plus/components/tooltip'
|
||||
import type { ISelectProps, SelectOptionProxy } from './token'
|
||||
|
||||
const MINIMUM_INPUT_WIDTH = 11
|
||||
|
||||
type useSelectType = (
|
||||
props: ISelectProps,
|
||||
emit: any
|
||||
@ -147,7 +145,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
|
||||
optionValues: [] as any[], // sorted value of options
|
||||
selected: [] as any[],
|
||||
selectionWidth: 0,
|
||||
calculatorWidth: 0,
|
||||
collapseItemWidth: 0,
|
||||
selectedLabel: '',
|
||||
hoveringIndex: -1,
|
||||
@ -163,7 +160,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
|
||||
const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
|
||||
const tagTooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
const calculatorRef = ref<HTMLElement>(null)
|
||||
const prefixRef = ref<HTMLElement>(null)
|
||||
const suffixRef = ref<HTMLElement>(null)
|
||||
const menuRef = ref<HTMLElement>(null)
|
||||
@ -540,10 +536,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
|
||||
states.selectionWidth = selectionRef.value.getBoundingClientRect().width
|
||||
}
|
||||
|
||||
const resetCalculatorWidth = () => {
|
||||
states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width
|
||||
}
|
||||
|
||||
const resetCollapseItemWidth = () => {
|
||||
states.collapseItemWidth =
|
||||
collapseItemRef.value.getBoundingClientRect().width
|
||||
@ -858,12 +850,7 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
|
||||
return { maxWidth: `${states.selectionWidth}px` }
|
||||
})
|
||||
|
||||
const inputStyle = computed(() => ({
|
||||
width: `${Math.max(states.calculatorWidth, MINIMUM_INPUT_WIDTH)}px`,
|
||||
}))
|
||||
|
||||
useResizeObserver(selectionRef, resetSelectionWidth)
|
||||
useResizeObserver(calculatorRef, resetCalculatorWidth)
|
||||
useResizeObserver(menuRef, updateTooltip)
|
||||
useResizeObserver(wrapperRef, updateTooltip)
|
||||
useResizeObserver(tagMenuRef, updateTagTooltip)
|
||||
@ -885,7 +872,6 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
|
||||
hoverOption,
|
||||
selectSize,
|
||||
filteredOptionsCount,
|
||||
resetCalculatorWidth,
|
||||
updateTooltip,
|
||||
updateTagTooltip,
|
||||
debouncedOnInputChange,
|
||||
@ -933,14 +919,12 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => {
|
||||
// computed style
|
||||
tagStyle,
|
||||
collapseTagStyle,
|
||||
inputStyle,
|
||||
|
||||
// DOM ref
|
||||
popperRef,
|
||||
inputRef,
|
||||
tooltipRef,
|
||||
tagTooltipRef,
|
||||
calculatorRef,
|
||||
prefixRef,
|
||||
suffixRef,
|
||||
selectRef,
|
||||
|
||||
@ -159,6 +159,7 @@
|
||||
|
||||
@include e(placeholder) {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
@ -184,7 +185,7 @@
|
||||
}
|
||||
|
||||
@include e(input-wrapper) {
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
|
||||
@include when(hidden) {
|
||||
// Out of the document flow
|
||||
@ -202,7 +203,7 @@
|
||||
font-family: inherit;
|
||||
appearance: none;
|
||||
height: map.get($select-item-height, 'default');
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
@include when(disabled) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user