@@ -49,6 +49,11 @@ configs().forEach(({ title, screenshot, config }) => {
49
49
configs ( { modes : [ 'ios' ] , directions : [ 'ltr' ] } ) . forEach ( ( { title, config } ) => {
50
50
test . describe ( title ( 'input: item functionality' ) , ( ) => {
51
51
test ( 'clicking padded space within item should focus the input' , async ( { page } ) => {
52
+ test . info ( ) . annotations . push ( {
53
+ type : 'issue' ,
54
+ description : 'https://github.com/ionic-team/ionic-framework/issues/21982' ,
55
+ } ) ;
56
+
52
57
await page . setContent (
53
58
`
54
59
<ion-item>
@@ -57,11 +62,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
57
62
` ,
58
63
config
59
64
) ;
60
- const itemNative = page . locator ( '.item-native' ) ;
65
+
66
+ const item = page . locator ( 'ion-item' ) ;
61
67
const input = page . locator ( 'ion-input input' ) ;
62
68
63
69
// Clicks the padded space within the item
64
- await itemNative . click ( {
70
+ await item . click ( {
65
71
position : {
66
72
x : 5 ,
67
73
y : 5 ,
@@ -70,5 +76,86 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
70
76
71
77
await expect ( input ) . toBeFocused ( ) ;
72
78
} ) ;
79
+
80
+ test ( 'clicking padded space within item should fire one click event' , async ( { page } ) => {
81
+ test . info ( ) . annotations . push ( {
82
+ type : 'issue' ,
83
+ description : 'https://github.com/ionic-team/ionic-framework/issues/29761' ,
84
+ } ) ;
85
+
86
+ await page . setContent (
87
+ `
88
+ <ion-item>
89
+ <ion-input label="Input"></ion-input>
90
+ </ion-item>
91
+ ` ,
92
+ config
93
+ ) ;
94
+
95
+ const item = page . locator ( 'ion-item' ) ;
96
+ const onClick = await page . spyOnEvent ( 'click' ) ;
97
+
98
+ // Click the padding area (5px from left edge)
99
+ await item . click ( {
100
+ position : {
101
+ x : 5 ,
102
+ y : 5 ,
103
+ } ,
104
+ } ) ;
105
+
106
+ expect ( onClick ) . toHaveReceivedEventTimes ( 1 ) ;
107
+
108
+ // Verify that the event target is the input and not the item
109
+ const event = onClick . events [ 0 ] ;
110
+ expect ( ( event . target as HTMLElement ) . tagName . toLowerCase ( ) ) . toBe ( 'ion-input' ) ;
111
+ } ) ;
112
+
113
+ test ( 'clicking native wrapper should fire one click event' , async ( { page } ) => {
114
+ await page . setContent (
115
+ `
116
+ <ion-item>
117
+ <ion-input label="Input"></ion-input>
118
+ </ion-item>
119
+ ` ,
120
+ config
121
+ ) ;
122
+
123
+ const nativeWrapper = page . locator ( '.native-wrapper' ) ;
124
+ const onClick = await page . spyOnEvent ( 'click' ) ;
125
+
126
+ await nativeWrapper . click ( {
127
+ position : {
128
+ x : 5 ,
129
+ y : 5 ,
130
+ } ,
131
+ } ) ;
132
+
133
+ expect ( onClick ) . toHaveReceivedEventTimes ( 1 ) ;
134
+
135
+ // Verify that the event target is the input and not the native wrapper
136
+ const event = onClick . events [ 0 ] ;
137
+ expect ( ( event . target as HTMLElement ) . tagName . toLowerCase ( ) ) . toBe ( 'ion-input' ) ;
138
+ } ) ;
139
+
140
+ test ( 'clicking native input within item should fire click event with target as ion-input' , async ( { page } ) => {
141
+ await page . setContent (
142
+ `
143
+ <ion-item>
144
+ <ion-input label="Input"></ion-input>
145
+ </ion-item>
146
+ ` ,
147
+ config
148
+ ) ;
149
+
150
+ const nativeInput = page . locator ( '.native-input' ) ;
151
+ const onClick = await page . spyOnEvent ( 'click' ) ;
152
+
153
+ await nativeInput . click ( ) ;
154
+ expect ( onClick ) . toHaveReceivedEventTimes ( 1 ) ;
155
+
156
+ // Verify that the event target is the ion-input and not the native input
157
+ const event = onClick . events [ 0 ] ;
158
+ expect ( ( event . target as HTMLElement ) . tagName . toLowerCase ( ) ) . toBe ( 'ion-input' ) ;
159
+ } ) ;
73
160
} ) ;
74
161
} ) ;
0 commit comments