yury-dymov / react-autocomplete-input

Autocomplete input field for React
https://yury-dymov.github.io/react-autocomplete-input/
MIT License
199 stars 65 forks source link

Cannot read property 'createRange' of undefined #30

Closed mkmuduli closed 5 years ago

mkmuduli commented 5 years ago
 const makeMarkUp = event => {
  return (
    <div
      contentEditable
      dangerouslySetInnerHTML={{ __html: event.value.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hash_tag'>$2</span>") }}
      onInput={event.onChange}
    />
  );
}; 
<TextInput
        Component={makeMarkUp}
        options={this.props.options}
        maxOptions={6}
        matchAny={true}
        trigger="#"
        onChange={this.props.onChange}
        value={this.props.value}
      />

error is

Uncaught TypeError: Cannot read property 'createRange' of undefined
    at t.default (get-input-selection.js:1)
    at t.value (bundle.js:1)
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
    at executeDispatch (EventPluginUtils.js:85)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
    at executeDispatchesAndRelease (EventPluginHub.js:43)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (forEachAccumulated.js:24)
    at Object.processEventQueue (EventPluginHub.js:257)
    at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
    at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:28)
    at handleTopLevelImpl (ReactEventListener.js:72)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)

When pressing # the popup is not triggered.

The idea to use make hashTag Input with auto complete. HashTag string should be bold.

codesandbox link

yury-dymov commented 5 years ago

The problem is with your input container, it is not a native input container. react-autocomlete-input uses library, which natively evaluates caret position by calling either selectionStart and selectionEnd for modern browsers or document.selection.createRange() for legacy like IE < 11.

Div doesn't support those APIs, therefore you see this error. Try input or textarea instead