Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix input textarea search autofocus bug #1103

Merged
merged 1 commit into from
Apr 7, 2017
Merged

fix input textarea search autofocus bug #1103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/input-item/__tests__/__snapshots__/demo.test.web.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`renders ./components/input-item/demo/basic.md correctly 1`] = `
class="am-input-control"
>
<input
placeholder="自动获取光标"
placeholder="自动获取光标，支付宝客户端有效"
type="text"
value=""
/>
Expand Down
2 changes: 1 addition & 1 deletion components/input-item/demo/basic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class BasicInputExample extends React.Component {
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="自动获取光标"
placeholder="自动获取光标，支付宝客户端有效"
autoFocus
>标题</InputItem>
<InputItem
Expand Down
4 changes: 2 additions & 2 deletions components/input-item/index.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ class InputItem extends React.Component<InputItemProps, any> {
}

componentDidMount() {
if (this.props.autoFocus || this.state.focused) {
if ((this.props.autoFocus || this.state.focused) && navigator.userAgent.indexOf('AlipayClient') > 0) {
(this.refs as any).input.focus();
}
}
Expand Down Expand Up @@ -155,7 +155,7 @@ class InputItem extends React.Component<InputItemProps, any> {
try {
(document.activeElement as any).scrollIntoViewIfNeeded();
} catch (e) { }
}, 0);
}, 100);
}
}

Expand Down
6 changes: 3 additions & 3 deletions components/search-bar/__tests__/__snapshots__/demo.test.web.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ exports[`renders ./components/search-bar/demo/basic.md correctly 1`] = `
<div
class="sub-title"
>
自动获取光标
自动获取光标，支付宝客户端有效
</div>
</div>
<form
Expand All @@ -81,13 +81,13 @@ exports[`renders ./components/search-bar/demo/basic.md correctly 1`] = `
class="am-search-synthetic-ph-placeholder"
style="visibility:visible;"
>
自动获取光标
自动获取光标，支付宝客户端有效
</span>
</span>
</div>
<input
class="am-search-value"
placeholder="自动获取光标"
placeholder="自动获取光标，支付宝客户端有效"
type="search"
value=""
/>
Expand Down
4 changes: 2 additions & 2 deletions components/search-bar/demo/basic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ class SearchBarExample extends React.Component {
<WingBlank><div className="sub-title">普通</div></WingBlank>
<SearchBar placeholder="搜索" />
<WhiteSpace />
<WingBlank><div className="sub-title">自动获取光标</div></WingBlank>
<SearchBar placeholder="自动获取光标" autoFocus />
<WingBlank><div className="sub-title">自动获取光标，支付宝客户端有效</div></WingBlank>
<SearchBar placeholder="自动获取光标，支付宝客户端有效" autoFocus />
<WhiteSpace />
<WingBlank><div className="sub-title">手动获取获取光标</div></WingBlank>
<SearchBar
Expand Down
14 changes: 7 additions & 7 deletions components/search-bar/index.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
componentDidMount() {
const initBtn = window.getComputedStyle(this.refs.rightBtn);
this.rightBtnInitMarginleft = initBtn['margin-left'];
if (this.props.autoFocus || this.state.focused) {
if ((this.props.autoFocus || this.state.focused) && navigator.userAgent.indexOf('AlipayClient') > 0) {
(this.refs as any).searchInput.focus();
}
this.componentDidUpdate();
Expand Down Expand Up @@ -112,7 +112,7 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
try {
(document.activeElement as any).scrollIntoViewIfNeeded();
} catch (e) { }
}, 0);
}, 100);
}
};

Expand All @@ -121,12 +121,12 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
this.setState({
focus: false,
});
if (!('focused' in this.props)) {
this.setState({
focused: false,
});
}
}, 0);
if (!('focused' in this.props)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

话说这种判断为什么要用 in ? 直接 this.props.focused 不行吗？

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是否存在，与布尔值结果还是有区别的吧。这个if我记得是承玉大神加进来的，我很想删掉..感觉没有用

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我们的文档写的 focused bool false, 当然是应该判断 true false，而不是判断存在

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

focused?: boolean; ?指的是可以没有，有的话是boolean类型

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

没有就是 undefined，同样是false， this.props.focused 的判断就够了

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最终显示结果是一样的。

但是写成 if (!this.props.focused) 的话，<Foo focused={fasle} /> 也会去 setState，区别在这里。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在这里 <Foo focused={fasle} /> 去 setState 看起来是合理的吧

Copy link
Member

@yesmeck yesmeck Apr 7, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

对的，�我搞错了。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ @，重新捋一下：

情况一：

  1. <Foo />;
  2. onBlur 后需要去更新 this.state.focus;

情况二（focused 受控）：

  1. <Foo focused={this.state.focused} onBlur={this.handleBlur} onFocus={this.handleFocus} />;
  2. onBlur 的时候如果 setState 了， 在 componentWillRecevie 的时候还会去 setState 一次，会多一次 setState。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

还没看代码，但如果是你说的2受控模式的话，内部的onBlur是不应该setState的，应该全部从props接收再设置

this.setState({
focused: false,
});
}
if (this.props.onBlur) {
this.props.onBlur();
}
Expand Down
2 changes: 1 addition & 1 deletion components/textarea-item/__tests__/__snapshots__/demo.test.web.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
>
<textarea
data-seed="logId"
placeholder="自动获取光标"
placeholder="自动获取光标，支付宝客户端有效"
rows="1"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/textarea-item/demo/basic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class TextareaItemExample extends React.Component {
<List renderHeader={() => '自定义获取光标'}>
<TextareaItem
title="标题"
placeholder="自动获取光标"
placeholder="自动获取光标，支付宝客户端有效"
data-seed="logId"
autoFocus
autoHeight
Expand Down
4 changes: 2 additions & 2 deletions components/textarea-item/index.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default class TextareaItem extends React.Component<TextareaItemProps, Tex

componentDidMount() {
this.componentDidUpdate();
if (this.props.autoFocus || this.state.focused) {
if ((this.props.autoFocus || this.state.focused) && navigator.userAgent.indexOf('AlipayClient') > 0) {
(this.refs as any).textarea.focus();
}
}
Expand Down Expand Up @@ -136,7 +136,7 @@ export default class TextareaItem extends React.Component<TextareaItemProps, Tex
try {
(document.activeElement as any).scrollIntoViewIfNeeded();
} catch (e) { }
}, 0);
}, 100);
}
};

Expand Down