@@ -120,19 +120,25 @@ export default function UseBootstrapTag(target: HTMLInputElement) {
120120 }
121121
122122 // Tags
123+ const tagElement = createElement ( 'button' , {
124+ type : 'button' ,
125+ className : `align-items-center gap-1 d-inline-flex py-0 border-0 btn btn-${ config . variant } ,
126+ disabled,
127+ } )
128+ classList . contains ( 'form-control-sm' ) && tagElement . classList . add ( 'btn-sm' )
129+ classList . contains ( 'form-control-lg' ) && tagElement . classList . add ( 'btn-lg' )
130+ config . xPosition === 'left' && tagElement . classList . add ( 'flex-row-reverse' )
131+ const closeTagElement = createElement ( 'span' , {
132+ className : 'd-inline-flex' ,
133+ role : 'button' ,
134+ tabIndex : - 1 ,
135+ innerHTML : '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>' ,
136+ } )
123137 const renderTags = ( items : string [ ] ) => {
124- tags ( ) . forEach ( button => button . remove ( ) )
125- const element = createElement ( 'button' , {
126- type : 'button' ,
127- className : `align-items-center gap-1 d-inline-flex py-0 border-0 btn btn-${ config . variant } ,
128- disabled,
129- } )
130- classList . contains ( 'form-control-sm' ) && element . classList . add ( 'btn-sm' )
131- classList . contains ( 'form-control-lg' ) && element . classList . add ( 'btn-lg' )
132- config . xPosition === 'left' && element . classList . add ( 'flex-row-reverse' )
138+ tags ( ) . forEach ( tag => tag . remove ( ) )
133139 items . reverse ( ) . forEach ( ( value , i ) => {
134140 const index = items . length - 1 - i
135- const tag = element . cloneNode ( ) as typeof element
141+ const tag = tagElement . cloneNode ( ) as typeof tagElement
136142 tag . innerHTML = value
137143 tag . onfocus = ( ) => {
138144 tag . classList . add ( 'active' )
@@ -155,12 +161,7 @@ export default function UseBootstrapTag(target: HTMLInputElement) {
155161 }
156162 }
157163 if ( ! disabled ) {
158- const span = createElement ( 'span' , {
159- className : 'd-inline-flex' ,
160- role : 'button' ,
161- tabIndex : - 1 ,
162- innerHTML : '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>' ,
163- } )
164+ const span = closeTagElement . cloneNode ( true ) as typeof closeTagElement
164165 span . onclick = ( ) => {
165166 removeByIndex ( index )
166167 textFocus ( )
0 commit comments