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

Select Geocoder text on focus. Fixes #4268. #4464

Merged
merged 4 commits into from
Oct 20, 2016
Merged

Select Geocoder text on focus. Fixes #4268. #4464

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
259bac8
Select Geocoder text on focus. Fixes #4268.
twpayne Oct 19, 2016
ad5d8e0
Add comment about select Safari hack.
twpayne Oct 20, 2016
3bec493
Remove focus event listener on Geocoder destroy.
twpayne Oct 20, 2016
f91b8a7
Add missed event type.
twpayne Oct 20, 2016
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
12 changes: 12 additions & 0 deletions Source/Widgets/Geocoder/Geocoder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,18 @@ value: searchText,\
valueUpdate: "afterkeydown",\
disable: isSearchInProgress,\
css: { "cesium-geocoder-input-wide" : keepExpanded || searchText.length > 0 }');

this._onTextBoxFocus = function() {
// as of 2016-10-19, setTimeout is required to ensure that the
// text is focused on Safari 10
setTimeout(function() {
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the purpose of the setTimeout?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

JavaScript cargo-culting :) This StackOverflow answer says "In Chrome the selection via .select() doesn't stick - adding a slight timeout resolves this issue.".

Copy link
Contributor

Choose a reason for hiding this comment

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

I just tried the latest version of Chrome/Firefox/IE and everything worked fine without the timeout, so we can remove it to start and add it back if it's ever needed.

The general strategy for Cesium development is to target the latest version of the 5 major browsers (especially since 5 of them are evergreen) and only extra code for older browsers if its really needed and has wide enough use (and we can actually replicate the broken behavior we are fixing first).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I just tried on the latest version of Safari (10.0 (12602.1.50.0.10)), and it seems that setTimeout is needed.

Copy link
Contributor

Choose a reason for hiding this comment

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

Sounds good, thanks for checking. Can you add a comment to the code indicating the setTimeout is needed for Safari, this way someone doesn't accidentally remove it in the future. Thanks

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

textBox.select();
}, 0);
};

textBox.addEventListener('focus', this._onTextBoxFocus, false);
form.appendChild(textBox);
this._textBox = textBox;

var searchButton = document.createElement('span');
searchButton.className = 'cesium-geocoder-searchButton';
Expand Down Expand Up @@ -164,6 +175,7 @@ cesiumSvgPath: { path: isSearchInProgress ? _stopSearchPath : _startSearchPath,

knockout.cleanNode(this._form);
this._container.removeChild(this._form);
this._textBox.removeEventListener(this._onTextBoxFocus, false);
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe this should be this._textBox.removeEventListener('focus', this._onTextBoxFocus, 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.

Doh! Good catch. Sorry. Fixed.


return destroyObject(this);
};
Expand Down