@@ -738,6 +738,146 @@ QUnit.module('tags', moduleSetup, () => {
738738 done ( ) ;
739739 } , TIME_TO_WAIT ) ;
740740 } ) ;
741+
742+ [ 'items' , 'dataSource' ] . forEach ( ( optionName ) => {
743+ QUnit . test ( 'TagBox should not have unexpected selected tags when value includes item that doesn\'t exist in items' , function ( assert ) {
744+ const options = { value : [ 1 , 11 ] } ;
745+ options [ optionName ] = [ 1 , 2 , 3 ] ;
746+ const $tagBox = $ ( '#tagBox' ) . dxTagBox ( options ) ;
747+ const tagBox = $tagBox . dxTagBox ( 'instance' ) ;
748+
749+ const { selectedItems } = tagBox . option ( ) ;
750+ const $tags = $tagBox . find ( `.${ TAGBOX_TAG_CLASS } ) ;
751+
752+ assert . deepEqual ( selectedItems , [ 1 ] , 'selectedItems have no unexpected items' ) ;
753+ assert . strictEqual ( $tags . length , 1 , 'there is no unexpected tags' ) ;
754+ } ) ;
755+ } ) ;
756+
757+ [ false , true ] . forEach ( ( deferRendering ) => {
758+ [
759+ {
760+ initialOptions : {
761+ deferRendering,
762+ items : [ 1 , 2 , 3 ] ,
763+ value : [ 1 , 3 ] ,
764+ } ,
765+ optionsToUpdate : {
766+ items : [ 1 , 2 ] ,
767+ } ,
768+ expectedSelectedItems : [ 1 ] ,
769+ optionName : 'items' ,
770+ } ,
771+ {
772+ initialOptions : {
773+ deferRendering,
774+ dataSource : [ 1 , 2 , 3 ] ,
775+ value : [ 1 , 3 ] ,
776+ } ,
777+ optionsToUpdate : {
778+ dataSource : [ 1 , 2 ] ,
779+ } ,
780+ expectedSelectedItems : [ 1 ] ,
781+ optionName : 'dataSource' ,
782+ } ,
783+ {
784+ initialOptions : {
785+ deferRendering,
786+ items : [ 1 ] ,
787+ value : [ 1 ] ,
788+ } ,
789+ optionsToUpdate : {
790+ items : null ,
791+ } ,
792+ expectedSelectedItems : [ ] ,
793+ optionName : 'items' ,
794+ } ,
795+ {
796+ initialOptions : {
797+ deferRendering,
798+ dataSource : [ 1 ] ,
799+ value : [ 1 ] ,
800+ } ,
801+ optionsToUpdate : {
802+ dataSource : null ,
803+ } ,
804+ expectedSelectedItems : [ ] ,
805+ optionName : 'dataSource' ,
806+ } ,
807+ {
808+ initialOptions : {
809+ deferRendering,
810+ dataSource : [ { id : 1 , text : 'one' } , { id : 2 , text : 'two' } , { id : 3 , text : 'three' } ] ,
811+ value : [ 1 , 3 ] ,
812+ valueExpr : 'id' ,
813+ } ,
814+ optionsToUpdate : {
815+ dataSource : [ { id : 1 , text : 'one' } , { id : 2 , text : 'two' } ] ,
816+ } ,
817+ expectedSelectedItems : [ { id : 1 , text : 'one' } ] ,
818+ optionName : 'dataSource' ,
819+ } ,
820+ {
821+ initialOptions : {
822+ deferRendering,
823+ dataSource : new DataSource ( { store : [ { id : 1 , text : 'one' } , { id : 2 , text : 'two' } , { id : 3 , text : 'three' } ] } ) ,
824+ value : [ 1 , 3 ] ,
825+ valueExpr : 'id' ,
826+ } ,
827+ optionsToUpdate : {
828+ dataSource : new DataSource ( { store : [ { id : 1 , text : 'one' } , { id : 2 , text : 'two' } ] } ) ,
829+ } ,
830+ expectedSelectedItems : [ { id : 1 , text : 'one' } ] ,
831+ optionName : 'dataSource' ,
832+ } ,
833+ {
834+ initialOptions : {
835+ deferRendering,
836+ items : null ,
837+ value : [ 1 ] ,
838+ } ,
839+ optionsToUpdate : {
840+ items : [ 1 , 2 ] ,
841+ } ,
842+ expectedSelectedItems : [ 1 ] ,
843+ optionName : 'items' ,
844+ } ,
845+ {
846+ initialOptions : {
847+ deferRendering,
848+ dataSource : [ { id : 1 , text : 'one' } , { id : 2 , text : 'two' } ] ,
849+ value : [ 1 , 3 ] ,
850+ valueExpr : 'id' ,
851+ } ,
852+ optionsToUpdate : {
853+ dataSource : [ { id : 1 , text : 'one' } , { id : 2 , text : 'two' } , { id : 3 , text : 'three' } ] ,
854+ } ,
855+ expectedSelectedItems : [ { id : 1 , text : 'one' } , { id : 3 , text : 'three' } ] ,
856+ optionName : 'dataSource' ,
857+ } ,
858+ ] . forEach ( ( { initialOptions, optionsToUpdate, expectedSelectedItems, optionName } ) => {
859+ const source = initialOptions . dataSource instanceof DataSource ? 'DataSource' : JSON . stringify ( initialOptions [ optionName ] ) ;
860+
861+ QUnit . test ( `SelectedItems should be updated correctly on runtime ${ optionName } ${ deferRendering } ${ source } , function ( assert ) {
862+ const tagBox = $ ( '#tagBox' ) . dxTagBox ( initialOptions ) . dxTagBox ( 'instance' ) ;
863+
864+ tagBox . option ( optionsToUpdate ) ;
865+
866+ assert . deepEqual ( tagBox . option ( 'selectedItems' ) , expectedSelectedItems , 'selectedItems are updated' ) ;
867+ } ) ;
868+
869+ QUnit . test ( `Tags should be updated correctly on runtime ${ optionName } ${ deferRendering } ${ source } , function ( assert ) {
870+ const $tagBox = $ ( '#tagBox' ) . dxTagBox ( initialOptions ) ;
871+ const tagBox = $tagBox . dxTagBox ( 'instance' ) ;
872+
873+ tagBox . option ( optionsToUpdate ) ;
874+
875+ const $tags = $tagBox . find ( `.${ TAGBOX_TAG_CLASS } ) ;
876+
877+ assert . strictEqual ( $tags . length , expectedSelectedItems . length , 'tags are updated' ) ;
878+ } ) ;
879+ } ) ;
880+ } ) ;
741881} ) ;
742882
743883QUnit . module ( 'multi tag support' , {
@@ -7038,7 +7178,7 @@ QUnit.module('performance', () => {
70387178 this . resetGetterCallCount ( ) ;
70397179 $ ( `.${ SELECT_ALL_CHECKBOX_CLASS } ) . trigger ( 'dxclick' ) ;
70407180
7041- assert . strictEqual ( this . getValueGetterCallCount ( ) , 6154 , 'key getter call count' ) ;
7181+ assert . strictEqual ( this . getValueGetterCallCount ( ) , 6254 , 'key getter call count' ) ;
70427182 assert . strictEqual ( isValueEqualsSpy . callCount , 5050 , '_isValueEquals call count' ) ;
70437183 } ) ;
70447184
@@ -7049,7 +7189,7 @@ QUnit.module('performance', () => {
70497189 const checkboxes = $ ( `.${ LIST_CHECKBOX_CLASS } ) ;
70507190 checkboxes . eq ( checkboxes . length - 1 ) . trigger ( 'dxclick' ) ;
70517191
7052- assert . strictEqual ( this . getValueGetterCallCount ( ) , 6054 , 'key getter call count' ) ;
7192+ assert . strictEqual ( this . getValueGetterCallCount ( ) , 6153 , 'key getter call count' ) ;
70537193 } ) ;
70547194 } ) ;
70557195
0 commit comments