Browse Source

fix: add input search focus & blur methods

pull/165/head
tjz 7 years ago
parent
commit
1297dac4c9
  1. 18
      components/input/Search.jsx
  2. 31
      components/input/__tests__/Search.test.js
  3. 9
      components/input/__tests__/__snapshots__/Search.test.js.snap

18
components/input/Search.jsx

@ -29,6 +29,13 @@ export default {
this.$emit('search', this.$refs.input.stateValue)
this.$refs.input.focus()
},
focus () {
this.$refs.input.focus()
},
blur () {
this.$refs.input.blur()
},
getButtonOrIcon () {
const { prefixCls, size } = this
const enterButton = getComponentFromProp(this, 'enterButton')
@ -45,7 +52,7 @@ export default {
},
})
} else if (enterButtonAsElement.tag === 'button') {
return cloneElement(enterButtonAsElement[0], {
return cloneElement(enterButtonAsElement, {
on: {
click: this.onSearch,
},
@ -93,14 +100,7 @@ export default {
{...inputProps}
class={inputClassName}
ref='input'
>
{/* <Icon
slot='suffix'
class={`${prefixCls}-icon`}
onClick={this.onSearch}
type='search'
/> */}
</Input>
/>
)
},
}

31
components/input/__tests__/Search.test.js

@ -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()
})
})
})

9
components/input/__tests__/__snapshots__/Search.test.js.snap

@ -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…
Cancel
Save