Bug 1520697 - Odd behavior when dragging html into contenteditable search box (#4676)

content-src/components/Search/Search.jsx

@@ -16,6 +16,7 @@ export class _Search extends React.PureComponent {
     this.onSearchHandoffPaste = this.onSearchHandoffPaste.bind(this);
     this.onInputMount = this.onInputMount.bind(this);
     this.onSearchHandoffButtonMount = this.onSearchHandoffButtonMount.bind(this);
+    this.cancelEvent = this.cancelEvent.bind(this);
   }
 
   handleEvent(event) {
@@ -72,6 +73,10 @@ export class _Search extends React.PureComponent {
     this.doSearchHandoff(event.clipboardData.getData("Text"));
   }
 
+  cancelEvent(event) {
+    event.preventDefault();
+  }
+
   componentWillMount() {
     if (global.document) {
       // We need to listen to paste events that bubble up from the Search Hand-off
@@ -169,7 +174,7 @@ export class _Search extends React.PureComponent {
             onKeyDown={this.onSearchHandoffKeyDown}
             title={this.props.intl.formatMessage({id: "search_web_placeholder"})}>
             <div className="fake-textbox">{this.props.intl.formatMessage({id: "search_web_placeholder"})}</div>
-            <div className="fake-editable" tabIndex="-1" aria-hidden="true" contentEditable="" />
+            <div className="fake-editable" tabIndex="-1" aria-hidden="true" contentEditable="" onDrop={this.cancelEvent} />
             <div className="fake-caret" />
           </button>
           {/*

test/unit/content-src/components/Search.test.jsx

@@ -155,5 +155,11 @@ describe("<Search>", () => {
       assert.isUserEventAction(action);
       assert.propertyVal(action.data, "event", "SEARCH_HANDOFF");
     });
+    it("should not accept drop events", () => {
+      const wrapper = shallowWithIntl(<Search {...DEFAULT_PROPS} handoffEnabled={true} />);
+      const preventDefault = sinon.spy();
+      wrapper.find(".fake-editable").simulate("drop", {preventDefault});
+      assert.calledOnce(preventDefault);
+    });
   });
 });