@king-design/intact 3.6.0-beta.0 → 3.6.0

package/components/select/index.spec.ts

@@ -206,6 +206,9 @@ describe('Select', () => {
         const [instance, element] = mount(CreatableDemo);
 
         const input = element.querySelector('.k-input-inner') as HTMLInputElement;
+        
+        expect(instance.get('day')).to.be.null;
+        
         input.click();
         await wait();
         input.value = 'xxx';
@@ -213,38 +216,82 @@ describe('Select', () => {
         await wait();
         const dropdown = getElement('.k-select-menu')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
-        // select
+        
+        // check the created option appears in dropdown
+        const createOption = dropdown.querySelector('.k-select-option');
+        expect(createOption).to.exist;
+        expect(createOption!.textContent).to.contain('xxx');
+        
+        // press enter to select the custom option
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         expect(instance.get('day')).to.eql('xxx');
+        expect(input.value).to.eql('xxx');
 
-        // open again
+        // reopen dropdown
         input.click();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
         expect(dropdown.innerHTML).to.matchSnapshot();
-
-        // input again
+        
+        // input another custom option
         input.value = 'yyy';
         dispatchEvent(input, 'input');
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
         expect(dropdown.innerHTML).to.matchSnapshot();
 
-        // discard
+        const newCreateOption = dropdown.querySelector('.k-select-option');
+        expect(newCreateOption).to.exist;
+        expect(newCreateOption!.textContent).to.contain('yyy');
+
+        // click outside to cancel selection
         dispatchEvent(document, 'click');
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        expect(instance.get('day')).to.eql('xxx');
+        expect(instance.get('day')).to.eql('xxx'); // should keep the original value
+        expect(input.value).to.eql('xxx'); // should restore the original value
+        
+        // test multiple creatable
+        const [, multipleInput] = element.querySelectorAll<HTMLInputElement>('.k-input-inner');
+        expect(instance.get('days')).to.eql([]);
+        
+        multipleInput.click();
+        await wait();
+        multipleInput.value = 'custom1';
+        dispatchEvent(multipleInput, 'input');
+        await wait();
+        
+        // press enter to create and select the first custom option
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        expect(instance.get('days')).to.include('custom1');
+        expect(multipleInput.value).to.eql('custom1');
+        
+        // input the same option again
+        dispatchEvent(document, 'keydown', {keyCode: 13});
+        await wait();
+        expect(instance.get('days')).to.eql([]);
+        expect(multipleInput.value).to.eql('custom1');
+        
+        // test select original options
+        multipleInput.value = 'Monday';
+        dispatchEvent(multipleInput, 'input');
+        await wait();
+        const multipleDropdown = getElement('.k-select-menu')!;
+        const mondayOption = multipleDropdown.querySelector('.k-select-option') as HTMLElement;
+        expect(mondayOption.textContent).to.eql('星期一');
+        mondayOption.click();
+        await wait();
+        expect(instance.get('days')).to.include('Monday');
     });
 
     it('keepKeywords', async () => {
-        // 创建一个测试组件，包含keepKeywords功能
         class KeepKeywordsDemo extends Component<{days: string[]}> {
             static template = `
                 const {Select, Option} = this;
                 <div>
-                    <Select v-model="days" filterable multiple creatable keepKeywords>
+                    <Select v-model="days" filterable multiple creatable keepKeywords={false}>
                         <Option value="Monday">星期一</Option>
                         <Option value="Tuesday">星期二</Option>
                         <Option value="Wednesday">星期三</Option>
@@ -263,50 +310,50 @@ describe('Select', () => {
         const [instance, element] = mount(KeepKeywordsDemo);
         const input = element.querySelector('.k-input-inner') as HTMLInputElement;
         
-        // 1. 输入自定义选项 "custom1"
+        // input custom option "custom1"
         input.click();
         await wait();
         input.value = 'custom1';
         dispatchEvent(input, 'input');
         await wait();
         
-        // 验证创建的选项出现在dropdown中
+        // check the created option appears in dropdown
         const dropdown = getElement('.k-select-menu')!;
         expect(dropdown.innerHTML).to.contain('custom1');
         
-        // 2. 按回车创建并选中
+        // press enter to create and select
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         
-        // 验证选项被选中，且输入框被清空
+        // check the option is selected, and the input is cleared
         expect(instance.get('days')).to.eql(['custom1']);
-        expect(input.value).to.eql(''); // keepKeywords=true时应该清空输入框
+        expect(input.value).to.eql('');
         
-        // 3. 再次输入相同的选项 "custom1"
+        // input the same option "custom1" again
         input.value = 'custom1';
         dispatchEvent(input, 'input');
         await wait();
         
-        // 4. 再次按回车
+        // press enter again
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         
-        // 验证选项仍然被选中（不会被取消选中），且输入框被清空
-        expect(instance.get('days')).to.eql(['custom1']); // 应该保持选中状态
-        expect(input.value).to.eql(''); // 输入框应该被清空
+        // check the option is still selected (not be unselected), and the input is cleared
+        expect(instance.get('days')).to.eql(['custom1']); // should be selected
+        expect(input.value).to.eql(''); // should be cleared
         
-        // 5. 输入另一个自定义选项 "custom2"
+        // input another custom option "custom2"
         input.value = 'custom2';
         dispatchEvent(input, 'input');
         await wait();
         dispatchEvent(document, 'keydown', {keyCode: 13});
         await wait();
         
-        // 验证两个选项都被选中
+        // check two options are selected
         expect(instance.get('days')).to.eql(['custom1', 'custom2']);
         expect(input.value).to.eql('');
         
-        // 6. 测试原有选项的正常行为
+        // test the normal behavior of original options
         input.click();
         await wait();
         const mondayOption = dropdown.querySelector('[data-value="Monday"]') as HTMLElement;
@@ -315,7 +362,7 @@ describe('Select', () => {
             await wait();
             expect(instance.get('days')).to.include('Monday');
             
-            // 再次点击应该能取消选中（原有选项不受keepKeywords影响）
+            // click again should be unselected (original options are not affected by keepKeywords)
             mondayOption.click();
             await wait();
             expect(instance.get('days')).to.not.include('Monday');
@@ -383,21 +430,47 @@ describe('Select', () => {
     });
 
     it('Searchable with multiple should show correct initial checkbox state', async () => {
-        const [instance, element] = mount(SearchableDemo);
+        class Demo extends Component {
+            static template = `
+                const {Select, Option} = this;
+                <Select v-model="days" searchable multiple>
+                    <Option value="Monday" disabled>星期一</Option>
+                    <Option value="Tuesday">星期二</Option>
+                    <Option value="Wednesday">星期三</Option>
+                    <Option value="Thursday">星期四</Option>
+                    <Option value="Friday">星期五</Option>
+                    <Option value="Saturday">星期六</Option>
+                    <Option value="Sunday">星期天</Option>
+                    <b:values args="[value]">
+                        <div class="k-value">
+                            已选择{value.length}项 / 共7项
+                        </div>
+                    </b:values>
+                </Select>
+            `;
+            static defaults() {
+                return {
+                    days: ['Tuesday']
+                }
+            }
+            private Tooltip = Tooltip;
+            private Select = Select;
+            private Option = Option;
+        }
+
+        const [instance, element] = mount(Demo as any);
 
-        // 验证初始值
         expect(instance.get('days')).to.eql(['Tuesday']);
 
-        // 第一次打开dropdown，检查初始状态
-        const [, select] = element.querySelectorAll<HTMLElement>('.k-select');
-        select.click();
+        // first open dropdown, check initial state
+        element.click();
         await wait();
         
         const dropdown = getElement('.k-select-menu')!;
         const checkboxes = dropdown.querySelectorAll<HTMLInputElement>('.k-checkbox input[type="checkbox"]');
         const options = dropdown.querySelectorAll<HTMLElement>('.k-select-option');
         
-        // 找到Tuesday选项对应的checkbox
+        // find the checkbox of Tuesday option
         let tuesdayCheckbox: HTMLInputElement | null = null;
         let tuesdayOption: HTMLElement | null = null;
         
@@ -408,21 +481,21 @@ describe('Select', () => {
             }
         });
         
-        // 验证Tuesday的checkbox应该被选中
+        // check the checkbox of Tuesday should be checked
         expect(tuesdayCheckbox).to.exist;
         expect(tuesdayCheckbox!.checked).to.be.true;
         
-        // 验证Tuesday选项应该有active样式
+        // check the Tuesday option should have active style
         expect(tuesdayOption).to.exist;
         expect(tuesdayOption!.className).to.include('k-active');
         
-        // 关闭dropdown
+        // close dropdown
         const [cancel] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
         cancel.click();
         await wait();
         
-        // 再次打开dropdown，验证状态仍然正确
-        select.click();
+        // reopen dropdown, check the state is still correct
+        element.click();
         await wait();
         
         const dropdown2 = getElement('.k-select-menu')!;
@@ -439,7 +512,7 @@ describe('Select', () => {
             }
         });
         
-        // 验证第二次打开时状态依然正确
+        // check the state is still correct when reopen
         expect(tuesdayCheckbox2!.checked).to.be.true;
         expect(tuesdayOption2!.className).to.include('k-active');
     });

package/components/select/option.ts

@@ -40,7 +40,8 @@ export class Option extends Component<OptionProps> {
         } else {
             let values = select.get('value');
             
-            if (keepKeywords && isCreated && Array.isArray(values) && values.includes(value)) {
+            if (!keepKeywords && isCreated && Array.isArray(values) && values.includes(value)) {
+                select.resetKeywords();
                 return;
             }
             

package/components/select/select.ts

@@ -44,6 +44,7 @@ const typeDefs: Required<TypeDefs<SelectProps>> = {
 const defaults = (): Partial<SelectProps> => ({
     ...BaseSelect.defaults(),
     labelMap: new Map(),
+    keepKeywords: true,
 });
 
 export class Select<

package/components/select/styles.ts

@@ -5,7 +5,7 @@ import '../../styles/global';
 import { cache } from '../utils';
 
 type SizeStyles = {
-    padding?: string,
+    padding: string,
     height: string,
     fontSize: string,
 }
@@ -118,6 +118,8 @@ setDefault(() => {
     makeGroupStyles?.clearCache();
 });
 
+export { select }
+
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;

package/components/select/useInput.ts

@@ -11,13 +11,9 @@ import {
 } from 'intact';
 import {useState, State} from '../../hooks/useState';
 import type {Select, SelectProps} from './select';
-import {Option, OptionProps} from './option';
-import {OptionGroup, OptionGroupProps} from './group';
-import {isNullOrUndefined, EMPTY_OBJ, isStringOrNumber} from 'intact-shared';
-import {getTextByChildren, mapChildren, isComponentVNode} from '../utils';
 import type {Input} from '../input';
 
-export function useInput(resetKeywords: (keywords: State<string>) => void) {
+export function useInput(resetKeywords: () => void) {
     const component = useInstance() as Select;
     const keywords = useState('');
     const inputRef = createRef<Input>();
@@ -50,9 +46,9 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
     component.on('$changed:show', show => {
         if (show) {
             focusInput();
-            resetKeywords(keywords);
+            resetKeywords();
         } else if (component.get('multiple')) {
-            resetKeywords(keywords);
+            resetKeywords();
         }
     });
     component.on('$changed:value', () => {
@@ -63,8 +59,8 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
              * don't reset keywords on multiple mode for continue selection
              * https://github.com/ksc-fe/kpc/issues/983
              */
-            if (keepKeywords) {
-                resetKeywords(keywords);
+            if (!keepKeywords) {
+                resetKeywords();
             }
         }
     });

package/components/table/index.spec.ts

@@ -496,7 +496,6 @@ describe('Table', () => {
         checkbox.click();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        debugger;
         expect(table.getCheckedData()).to.have.lengthOf(8);
 
         const arrow = element.querySelector('.k-table-arrow') as HTMLElement;
@@ -723,4 +722,73 @@ describe('Table', () => {
         expect(spy.callCount).to.eql(5);
         expect(spy.lastCall.lastArg).to.eql({value: 2, limit: 10});
     });
+
+    it('fixHeader with Affix header scroll sync', async () => {
+        interface Props {
+            data: any[]
+            fixHeader: boolean | number
+            virtual: boolean
+            stickScrollbar: boolean | number
+        }
+        
+        class Demo extends Component<Props> {
+            static template = `
+                const {Table, TableColumn} = this;
+                const {data, fixHeader, virtual, stickScrollbar} = this.get();
+                <Table data={data} fixHeader={fixHeader} virtual={virtual} stickScrollbar={stickScrollbar} ref="table">
+                    <TableColumn fixed="left" key="name" title="Name" width="200" />
+                    <TableColumn key="column1" title="Column1" width="300" />
+                    <TableColumn key="column2" title="Column2" width="300" />
+                    <TableColumn key="column3" title="Column3" width="300" />
+                    <TableColumn fixed="right" key="action" title="Action" width="200" />
+                </Table>
+            `;
+            
+            static defaults() {
+                return {
+                    data: Array.from({length: 10}, (_, i) => ({
+                        name: `Name ${i}`,
+                        column1: `Column1 ${i}`,
+                        column2: `Column2 ${i}`,
+                        column3: `Column3 ${i}`,
+                        action: `Action ${i}`
+                    })),
+                    fixHeader: 200,
+                    virtual: false,
+                    stickScrollbar: false
+                };
+            }
+            
+            private Table = Table;
+            private TableColumn = TableColumn;
+        }
+
+        const [instance, element] = mount(Demo);
+        
+        // Test 1: fixHeader only - scroll left 50px
+        await wait();
+        const scrollContainer = element.querySelector('.k-table-wrapper') as HTMLElement;
+        scrollContainer.scrollLeft = 50;
+        await wait(100);
+        const affixWrapper1 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper1.scrollLeft).to.eql(50);
+        
+        // Test 2: fixHeader + virtual - scroll left 50px more (total 100px)
+        instance.set('virtual', true);
+        await wait();
+        scrollContainer.scrollLeft = 100;
+        await wait(100);
+        
+        const affixWrapper2 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper2.scrollLeft).to.eql(100);
+        
+        // Test 3: stickScrollbar + fixHeader - scroll right 50px (back to 50px)
+        instance.set('stickScrollbar', true);
+        await wait();
+        scrollContainer.scrollLeft = 50;
+        await wait(100);
+        
+        const affixWrapper3 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper3.scrollLeft).to.eql(50);
+    });
 });

package/components/table/useStickyHeader.ts

@@ -22,7 +22,7 @@ export function useStickyHeader(callbacks: ScrollCallback[]) {
 
     // when the scroll element scroll horizontally, scroll the sticky header too 
     callbacks.push(scrollLeft => {
-        if (isNull(stickHeader.value)) return;
+        if (isNull(stickHeader.value) && !instance.get('fixHeader')) return;
 
         const affixHeadWrapper = headRef.value!.parentElement as HTMLElement;
         affixHeadWrapper.scrollLeft = scrollLeft;

package/components/timepicker/index.spec.ts

@@ -8,7 +8,6 @@ import {Timepicker} from 'kpc';
 import {Component} from 'intact';
 
 describe('Timepicker', () => {
-
     afterEach(async () => {
         unmount();
         await wait(500);
@@ -19,10 +18,18 @@ describe('Timepicker', () => {
         const [instance, element] = mount(BasicDemo);
 
         const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+        const inputInner = picker1.querySelector('.k-input-inner') as HTMLInputElement;
+
+        expect(inputInner.value).eql('');
         picker1.click();
         await wait(500);
-        let dropdown = getElement('.k-time-content')!;
+        expect(inputInner.value).eql('');
+
+        const dropdown = getElement('.k-time-content')!;
+        const ok = dropdown.querySelector('.k-btn') as HTMLElement;
+        expect(ok.classList.contains('k-disabled')).eql(true);
         expect(dropdown.innerHTML).to.matchSnapshot();
+
         const next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)') as HTMLElement;
         next.click();
         await wait();
@@ -32,7 +39,6 @@ describe('Timepicker', () => {
         await wait();
         expect(instance.get('time')).to.be.null;
         expect(dropdown.innerHTML).to.matchSnapshot();
-        const ok = dropdown.querySelector('.k-btn') as HTMLElement;
         ok.click();
         await wait(500);
         expect(instance.get('time')).to.eql('02:00:00');
@@ -43,27 +49,56 @@ describe('Timepicker', () => {
         await wait(500);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
+        // should reset show value on hiding
+        const activeHour = dropdown.querySelector('.k-scroll-select-item.k-active') as HTMLElement;
+        dispatchEvent(activeHour.nextElementSibling!, 'click');
+        await wait();
+        expect(inputInner.value).eql('04:03:03');
+        expect(instance.get('time')).eql('03:03:03');
+        document.body.click();
+        await wait();
+        expect(inputInner.value).eql('03:03:03');
+        expect(instance.get('time')).eql('03:03:03');
+    });
+
+    it('multipe time', async function() {
+        const [instance, element] = mount(BasicDemo);
+        const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+
         // multiple
         picker2.click();
-        await wait(500);
-        dropdown = getElement('.k-time-content')!;
-        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
+        let dropdown = getElement('.k-time-content')!;
         const ok2 = dropdown.querySelector('.k-btn') as HTMLElement;
+        expect(ok2.classList.contains('k-disabled')).eql(false);
+
+        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
+        const inputInner = picker2.querySelector('.k-input-inner') as HTMLInputElement;
+        expect(inputInner.value).eql('01:00:00');
+        expect(instance.get('timeArray')).eql([]);
+
         ok2.click();
-        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(12)')!.click();
+        await wait();
+        expect(instance.get('timeArray')).eql(['01:00:00']);
+
+        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
         ok2.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
+        expect(ok2.classList.contains('k-disabled')).eql(false);
+
         // click the same time will do nothing
         ok2.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
+
         // remove one value
         const [, close] = picker2.querySelectorAll<HTMLElement>('.k-tag-close');
         close.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00']);
-        expect(dropdown.innerHTML).to.matchSnapshot();
 
         // clear
         picker2.querySelector<HTMLElement>('.k-select-clear')!.click();
@@ -79,24 +114,107 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
     });
 
-    it('range', async () => {
-        const [instance, element] = mount(RangeDemo);
+    describe('range', () => {
+        it('basic', async () => {
+            const [instance, element] = mount(RangeDemo);
 
-        const picker = element.querySelector('.k-select') as HTMLElement;
-        picker.click();
-        await wait(500);
-        const dropdown = getElement('.k-time-content')!;
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
-        (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
-        await wait();
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-active')!.nextElementSibling!.nextElementSibling as HTMLElement).click();
-        await wait();
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        dropdown.querySelector<HTMLElement>('.k-btn')!.click();
-        await wait();
-        expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
+            const picker = element.querySelector('.k-select') as HTMLElement;
+            picker.click();
+            await wait(500);
+            const dropdown = getElement('.k-time-content')!;
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            (end.querySelector('.k-active')!.nextElementSibling!.nextElementSibling as HTMLElement).click();
+            await wait();
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
+
+            // clear
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            expect(instance.get('time')).to.eql(null);
+        });
+
+        it('only select one value then click confirm button directly', async () => {
+            const [instance, element] = mount(RangeDemo);
+
+            const picker = element.querySelector('.k-select') as HTMLElement;
+            picker.click();
+            await wait();
+            const dropdown = getElement('.k-time-content')!;
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+
+            // skip select end and confirm
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['01:00:00', '23:59:59']);
+
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            picker.click();
+            await wait();
+            (end.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['00:00:00', '00:59:59']);
+
+            // click confirm directly
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            picker.click();
+            await wait();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['00:00:00', '23:59:59']);
+        });
+
+        it('should unique', async () => {
+            const [instance, element] = mount(RangeDemo);
+            const [, multipe] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+
+            // multiple
+            multipe.click();
+            await wait();
+            let dropdown = getElement('.k-time-content')!;
+            const confirm = dropdown.querySelector('.k-btn') as HTMLElement;
+
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([['00:00:00', '23:59:59']]);
+
+            // confirm again
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([['00:00:00', '23:59:59']]);
+        });
+
+        it('should maintain consistency when we select the next value', async () => {
+            const [instance, element] = mount(RangeDemo);
+            const [, multipe] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+            instance.set('timeArr', [['01:00:00', '02:00:00']]);
+
+            // multiple
+            multipe.click();
+            await wait();
+            let dropdown = getElement('.k-time-content')!;
+            const confirm = dropdown.querySelector('.k-btn') as HTMLElement;
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([
+                ['01:00:00', '02:00:00'],
+                ['02:00:00', '02:00:00'],
+            ]);
+        });
     });
 
     it('step', async () => {
@@ -123,11 +241,11 @@ describe('Timepicker', () => {
         (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-disabled')!.nextElementSibling as HTMLElement).click();
+        (end.querySelector('.k-active')!.previousElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
-        expect(instance.get('time')).to.eql(['00:30:00', '00:30:00']);
+        expect(instance.get('time')).to.eql(['00:30:00', '23:30:00']);
     });
 
     it('format', async () => {