@@ -30,6 +30,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
30
30
import type { EventHandler } from '../_util/EventInterface' ;
31
31
import omit from '../_util/omit' ;
32
32
import type { AutoSizeType } from '../input/inputProps' ;
33
+ import useMergedState from '../_util/hooks/useMergedState' ;
33
34
34
35
export type BaseType = 'secondary' | 'success' | 'warning' | 'danger' ;
35
36
@@ -130,7 +131,6 @@ const Base = defineComponent({
130
131
const { prefixCls, direction } = useConfigInject ( 'typography' , props ) ;
131
132
132
133
const state = reactive ( {
133
- edit : false ,
134
134
copied : false ,
135
135
ellipsisText : '' ,
136
136
ellipsisContent : null ,
@@ -256,29 +256,39 @@ const Base = defineComponent({
256
256
} , 3000 ) ;
257
257
} ) ;
258
258
}
259
+
259
260
const editable = computed ( ( ) => {
260
261
const editable = props . editable ;
261
- if ( ! editable ) return { editing : state . edit } ;
262
+ if ( ! editable ) return { editing : false } ;
262
263
263
264
return {
264
- editing : state . edit ,
265
265
...( typeof editable === 'object' ? editable : null ) ,
266
266
} ;
267
267
} ) ;
268
268
269
+ const [ editing , setEditing ] = useMergedState ( false , {
270
+ value : computed ( ( ) => {
271
+ return editable . value . editing ;
272
+ } ) ,
273
+ } ) ;
274
+
269
275
function triggerEdit ( edit : boolean ) {
270
276
const { onStart } = editable . value ;
271
277
if ( edit && onStart ) {
272
278
onStart ( ) ;
273
279
}
274
280
275
- state . edit = edit ;
276
- nextTick ( ( ) => {
277
- if ( ! edit ) {
281
+ setEditing ( edit ) ;
282
+ }
283
+ watch (
284
+ editing ,
285
+ val => {
286
+ if ( ! val ) {
278
287
editIcon . value ?. focus ( ) ;
279
288
}
280
- } ) ;
281
- }
289
+ } ,
290
+ { flush : 'post' } ,
291
+ ) ;
282
292
283
293
// ============== Ellipsis ==============
284
294
function resizeOnNextFrame ( ) {
@@ -468,7 +478,7 @@ const Base = defineComponent({
468
478
}
469
479
470
480
return ( ) => {
471
- const { editing , triggerType = [ 'icon' ] } = editable . value ;
481
+ const { triggerType = [ 'icon' ] } = editable . value ;
472
482
const children =
473
483
props . ellipsis || props . editable
474
484
? props . content !== undefined
@@ -478,7 +488,7 @@ const Base = defineComponent({
478
488
? slots . default ( )
479
489
: props . content ;
480
490
481
- if ( editing ) {
491
+ if ( editing . value ) {
482
492
return renderEditInput ( ) ;
483
493
}
484
494
return (
0 commit comments