fix: add input search focus & blur methods
parent
cec59f2c97
commit
1297dac4c9
|
@ -29,6 +29,13 @@ export default {
|
||||||
this.$emit('search', this.$refs.input.stateValue)
|
this.$emit('search', this.$refs.input.stateValue)
|
||||||
this.$refs.input.focus()
|
this.$refs.input.focus()
|
||||||
},
|
},
|
||||||
|
focus () {
|
||||||
|
this.$refs.input.focus()
|
||||||
|
},
|
||||||
|
|
||||||
|
blur () {
|
||||||
|
this.$refs.input.blur()
|
||||||
|
},
|
||||||
getButtonOrIcon () {
|
getButtonOrIcon () {
|
||||||
const { prefixCls, size } = this
|
const { prefixCls, size } = this
|
||||||
const enterButton = getComponentFromProp(this, 'enterButton')
|
const enterButton = getComponentFromProp(this, 'enterButton')
|
||||||
|
@ -45,7 +52,7 @@ export default {
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
} else if (enterButtonAsElement.tag === 'button') {
|
} else if (enterButtonAsElement.tag === 'button') {
|
||||||
return cloneElement(enterButtonAsElement[0], {
|
return cloneElement(enterButtonAsElement, {
|
||||||
on: {
|
on: {
|
||||||
click: this.onSearch,
|
click: this.onSearch,
|
||||||
},
|
},
|
||||||
|
@ -93,14 +100,7 @@ export default {
|
||||||
{...inputProps}
|
{...inputProps}
|
||||||
class={inputClassName}
|
class={inputClassName}
|
||||||
ref='input'
|
ref='input'
|
||||||
>
|
/>
|
||||||
{/* <Icon
|
|
||||||
slot='suffix'
|
|
||||||
class={`${prefixCls}-icon`}
|
|
||||||
onClick={this.onSearch}
|
|
||||||
type='search'
|
|
||||||
/> */}
|
|
||||||
</Input>
|
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import { asyncExpect } from '@/tests/utils'
|
||||||
|
import Search from '../Search'
|
||||||
|
import Button from '../../button'
|
||||||
|
import focusTest from '../../../tests/shared/focusTest'
|
||||||
|
|
||||||
|
describe('Input.Search', () => {
|
||||||
|
focusTest(Search)
|
||||||
|
|
||||||
|
it('should support custom button', async () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
render () {
|
||||||
|
return <Search enterButton={<button>ok</button>} />
|
||||||
|
},
|
||||||
|
}, { sync: false })
|
||||||
|
await asyncExpect(() => {
|
||||||
|
expect(wrapper.html()).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should support custom Button', async () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
render () {
|
||||||
|
return <Search enterButton={<Button>ok</Button>} />
|
||||||
|
},
|
||||||
|
}, { sync: false })
|
||||||
|
await asyncExpect(() => {
|
||||||
|
expect(wrapper.html()).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Input.Search should support custom Button 1`] = `
|
||||||
|
<span class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper ant-input-search ant-input-search-enter-button"><input type="text" class="ant-input ant-input-search ant-input-search-enter-button"><span class="ant-input-suffix"><button type="button" class="ant-btn ant-btn-default ant-input-search-button"><span>ok</span></button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Input.Search should support custom button 1`] = `<span class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper ant-input-search ant-input-search-enter-button"><input type="text" class="ant-input ant-input-search ant-input-search-enter-button"><span class="ant-input-suffix"><button class="">ok</button></span></span>`;
|
Loading…
Reference in New Issue