Can I stop a click from triggering website's usual actions?

Question

As an experiment with React.js, I am trying to build a chrome extension that uses a content script to inject a input field (and now a button too) into certain websites. In this case I am trying to inject it into Twitter. It looks like this: please note that the code puts the button and input below the text, but it will have the same result

The injection works, but I can't actually use the input. I inject the element into tweets on the home page, and when I click on the input to type in it, it triggers the tweet and expands or contracts. This removes the focus from the input rendering it useless. I have tried to call back focus onBlur, and stopPropagation() onClick, but onClick isn't triggered and I'm not sure how to bring back focus with onBlur. How can I stop losing focus?

If you want to test it yourself, react-with-addons.js came from the starter kit here

EDIT: I tried adding button to the code to see if I could click on that, and I can. I can click on it with out triggering the tweet itself. This means there is something specific to the input box that is causing trouble, or there is something in the button that is blocking propagation of the click. Is there something special triggered when you click on an input field that other elements don't have that the tweets might have?

EDIT 2: I have now tried to add stopPropagation to a containing div and increasing it's z-index, neither of them will stop it.

EDIT 3: I have now tried onMouseDown(and onMouseUp, and onClick, all at the same time) with stopPropagation, with no luck. The strange part is I tried isPropagationStopped() afterwards, and it returns true. If this is so then why is Twitter still being triggered?

test_input.js

/**
 * @jsx React.DOM
 */
var Test_Input = React.createClass({
    maintain_focus: function(){
        e.stopPropagation();
        console.log("=====");
    },
    refocus: function(e){
        e.stopPropagation();
    },
    handle_click: function{
        console.log("clicked");
    }
    render: function(){
        return (<div>
                       <button onclick={this.handle_click}>
                       <input className="new_note_input" placeholder="Note" onclick={this.maintain_focus} onBlur={this.refocus}></input>
                   </div>);
    }
});
var elements_to_append_to = document.getElementsByClassName('content');
[].forEach.call(elements_to_append_to, function(element){
    var container = $("<span />");
    $(element).after(container);
    React.renderComponent(<Test_Input />, container[0]);
});

manifest.json

{
  "name": "Test Input",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": ["tabs", "bookmarks", "declarativeWebRequest", "*://*/*"],
  "content_scripts": [
        {
            "matches": [ "https://twitter.com/*"],
            "css":["src/social_notes.css"],
            "js":[ "build/jquery-2.1.0.min.js", "build/react-with-addons.js", "build/test_input.js"]
        }
    ]
}

Answer 1

e.stopPropagation() works on event handlers. Since input field click triggers default behaviour, instead of e.stopPropagation(), e.preventDefault() with a return false; in the input box click handler should do the trick.

In the handler, do a $(this).focus(); before returning false. This will keep the text box in focus.

eg:

$(".inputField").on("click", function(e){
  e.preventDefault();
  $(this).focus();
  return false;
})