Skip to content

Commit 51dd227

Browse files
author
Evan Jacobs
committed
Check for setSelectionRange
Fixes IE8 incompatibility, thanks @markplindsay
1 parent 38a876b commit 51dd227

File tree

3 files changed

+46
-45
lines changed

3 files changed

+46
-45
lines changed

‎dist/react-input-placeholder.js‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2-
var isPlaceholderSupported = (typeof document !== 'undefined') && 'placeholder' in document.createElement('input');
1+
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2+
var isPlaceholderSupported = (typeof document !== 'undefined')
3+
&& 'placeholder' in document.createElement('input');
34

45
/**
56
* Input is a wrapper around React.DOM.input with a `placeholder` shim for IE9.
@@ -12,6 +13,7 @@ var createShimmedElement = function(React, elementConstructor, name) {
1213
componentWillMount: function() {
1314
this.needsPlaceholding = this.props.placeholder && !isPlaceholderSupported;
1415
},
16+
1517
componentWillReceiveProps: function(props) {
1618
this.needsPlaceholding = props.placeholder && !isPlaceholderSupported;
1719
},
@@ -56,17 +58,13 @@ var createShimmedElement = function(React, elementConstructor, name) {
5658
},
5759

5860
setSelectionIfNeeded: function(node) {
59-
// if placeholder is visible, ensure cursor is at start of input
60-
if (this.needsPlaceholding &&
61-
this.hasFocus &&
62-
this.isPlaceholding &&
63-
(node.selectionStart !== 0 || node.selectionEnd !== 0)) {
61+
if ( this.needsPlaceholding
62+
&& 'setSelectionRange' in node
63+
&& this.hasFocus
64+
&& this.isPlaceholding
65+
&& (node.selectionStart !== 0 || node.selectionEnd !== 0)) {
6466
node.setSelectionRange(0, 0);
65-
66-
return true;
67-
}
68-
69-
return false;
67+
} // if placeholder is visible, ensure cursor is at start of input
7068
},
7169

7270
onChange: function(e) {
@@ -104,38 +102,42 @@ var createShimmedElement = function(React, elementConstructor, name) {
104102
},
105103

106104
render: function() {
107-
var element;
105+
var props = {};
108106
var value;
107+
var key;
109108

110-
if (!('createElement' in React)) { /* start -- to be removed in 2.0.0 */
111-
element = this.transferPropsTo(elementConstructor());
112-
} else { /* -- end */
113-
element = React.createElement(elementConstructor, this.props, this.props.children);
109+
for (key in this.props) {
110+
if (this.props.hasOwnProperty(key)) {
111+
props[key] = this.props[key];
112+
}
114113
}
115114

116115
if (this.needsPlaceholding) {
117116
// override valueLink and event handlers
118-
element.props.onFocus = this.onFocus;
119-
element.props.onBlur = this.onBlur;
120-
element.props.onChange = this.onChange;
121-
element.props.onSelect = this.onSelect;
122-
element.props.valueLink = undefined;
117+
props.onFocus = this.onFocus;
118+
props.onBlur = this.onBlur;
119+
props.onChange = this.onChange;
120+
props.onSelect = this.onSelect;
121+
props.valueLink = undefined;
123122

124123
value = this.getValue();
125124

126125
if (!value) {
127126
this.isPlaceholding = true;
128127
value = this.props.placeholder;
129-
element.props.type = 'text';
130-
element.props.className += ' placeholder';
128+
props.className += ' placeholder';
131129
} else {
132130
this.isPlaceholding = false;
133131
}
134132

135-
element.props.value = value;
133+
props.value = value;
136134
}
137135

138-
return element;
136+
if (!('createElement' in React)) { /* start -- to be removed in 2.0.0 */
137+
return this.transferPropsTo(elementConstructor());
138+
} else { /* -- end */
139+
return React.createElement(elementConstructor, props, this.props.children);
140+
}
139141
}
140142
});
141143
};
@@ -148,8 +150,8 @@ module.exports = function(React) {
148150
};
149151
} else { /* -- end */
150152
return {
151-
Input: React.createFactory(createShimmedElement(React, 'input', 'Input')),
152-
Textarea: React.createFactory(createShimmedElement(React, 'textarea', 'Textarea'))
153+
Input: createShimmedElement(React, 'input', 'Input'),
154+
Textarea: createShimmedElement(React, 'textarea', 'Textarea')
153155
};
154156
}
155157
};
@@ -164,5 +166,4 @@ if (typeof define === 'function' && define.amd) {
164166
} else {
165167
window.PlaceholderShim = reactInputPlaceholder(window.React);
166168
}
167-
},{"./react-input-placeholder":1}]},{},[2])
168-
;
169+
},{"./react-input-placeholder":1}]},{},[2])

‎dist/react-input-placeholder.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/react-input-placeholder.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
var isPlaceholderSupported = (typeof document !== 'undefined') && 'placeholder' in document.createElement('input');
1+
var isPlaceholderSupported = (typeof document !== 'undefined')
2+
&& 'placeholder' in document.createElement('input');
23

34
/**
45
* Input is a wrapper around React.DOM.input with a `placeholder` shim for IE9.
@@ -11,6 +12,7 @@ var createShimmedElement = function(React, elementConstructor, name) {
1112
componentWillMount: function() {
1213
this.needsPlaceholding = this.props.placeholder && !isPlaceholderSupported;
1314
},
15+
1416
componentWillReceiveProps: function(props) {
1517
this.needsPlaceholding = props.placeholder && !isPlaceholderSupported;
1618
},
@@ -55,17 +57,13 @@ var createShimmedElement = function(React, elementConstructor, name) {
5557
},
5658

5759
setSelectionIfNeeded: function(node) {
58-
// if placeholder is visible, ensure cursor is at start of input
59-
if (this.needsPlaceholding &&
60-
this.hasFocus &&
61-
this.isPlaceholding &&
62-
(node.selectionStart !== 0 || node.selectionEnd !== 0)) {
60+
if ( this.needsPlaceholding
61+
&& 'setSelectionRange' in node
62+
&& this.hasFocus
63+
&& this.isPlaceholding
64+
&& (node.selectionStart !== 0 || node.selectionEnd !== 0)) {
6365
node.setSelectionRange(0, 0);
64-
65-
return true;
66-
}
67-
68-
return false;
66+
} // if placeholder is visible, ensure cursor is at start of input
6967
},
7068

7169
onChange: function(e) {
@@ -107,8 +105,10 @@ var createShimmedElement = function(React, elementConstructor, name) {
107105
var value;
108106
var key;
109107

110-
for(key in this.props) {
111-
props[key] = this.props[key];
108+
for (key in this.props) {
109+
if (this.props.hasOwnProperty(key)) {
110+
props[key] = this.props[key];
111+
}
112112
}
113113

114114
if (this.needsPlaceholding) {

0 commit comments

Comments
 (0)