@@ -8,6 +8,7 @@ import useControlled from '../hooks/useControlled';
88import useDefaultProps from '../hooks/useDefaultProps' ;
99import useDragSorter from '../hooks/useDragSorter' ;
1010import useGlobalIcon from '../hooks/useGlobalIcon' ;
11+ import useUpdateLayoutEffect from '../hooks/useUpdateLayoutEffect' ;
1112import TInput from '../input' ;
1213import { tagInputDefaultProps } from './defaultProps' ;
1314import useHover from './useHover' ;
@@ -80,16 +81,24 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
8081 getDragProps,
8182 } ) ;
8283
84+ useUpdateLayoutEffect ( ( ) => {
85+ if ( excessTagsDisplayType === 'scroll' ) {
86+ scrollToRight ( ) ;
87+ }
88+ } , [ tagValue ] ) ;
89+
8390 const NAME_CLASS = `${ prefix } -tag-input` ;
8491 const WITH_SUFFIX_ICON_CLASS = `${ prefix } -tag-input__with-suffix-icon` ;
8592 const CLEAR_CLASS = `${ prefix } -tag-input__suffix-clear` ;
8693 const BREAK_LINE_CLASS = `${ prefix } -tag-input--break-line` ;
8794
8895 const tagInputPlaceholder = ! tagValue ?. length ? placeholder : '' ;
8996
90- const showClearIcon = Boolean ( ! readOnly && ! disabled && clearable && isHover && tagValue ?. length ) ;
97+ const showClearIcon = Boolean ( ! readOnly && ! disabled && clearable && isHover && ( tagValue ?. length || tInputValue ) ) ;
9198
92- useImperativeHandle ( ref as InputRef , ( ) => ( { ...( tagInputRef . current || { } ) } ) ) ;
99+ useImperativeHandle ( ref as InputRef , ( ) => ( {
100+ ...( tagInputRef . current || { } ) ,
101+ } ) ) ;
93102
94103 const updateSuffixWidth = ( selector : string , cssVar : string , widthRef : React . MutableRefObject < number > ) => {
95104 const wrapperEl = tagInputRef . current ?. currentElement as HTMLElement ;
@@ -140,9 +149,11 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
140149 } ;
141150
142151 const onInputEnter = ( value : InputValue , context : { e : KeyboardEvent < HTMLInputElement > } ) => {
152+ context . e ?. preventDefault ?.( ) ;
143153 setTInputValue ( '' , { e : context . e , trigger : 'enter' } ) ;
144- ! isCompositionRef . current && onInnerEnter ( value , context ) ;
145- scrollToRight ( ) ;
154+ if ( ! isCompositionRef . current ) {
155+ onInnerEnter ( value , context ) ;
156+ }
146157 } ;
147158
148159 const onInnerClick = ( context : { e : MouseEvent < HTMLDivElement > } ) => {
0 commit comments