title: OpenLayers3 Overlay with textboxes and buttons
body: <p>I have an Overlay on my OpenLayers3 map which displays over a Feature upon selection. This Overlay is destroyed upon deselection of a Feature, which occurs when the user clicks anywhere on the map (not on a feature).</p>
  
  <p>The Overlay shows some textboxes, and two buttons: Save Changes and Delete. The user should be able to  use the textboxes and press Save Changes to edit the Feature, or press Delete which will display a modal window for confirmation before deletion.</p>
  
  <p>However, the nature of event propagation is causing some trouble. With the Overlay's option of stopEvent set to true, the textboxes are clickable and editable, but the button's events do not fire. When set to false, the textboxes are click-through to the map, causing a deselect and destruction of the Overlay, though the buttons can now be clicked.</p>
  
  <p>Any suggestions on how to get both the textboxes enterable and editable, while maintaining the button's events capabilities?</p>
  
  <p>I couldn't quite get a jsFiddle working, but here is some example code below:</p>
  
  <p><strong>Select Tool on the Map</strong></p>
  
  <pre><code>var interaction = new ol.interaction.Select({
      condition: ol.events.condition.click
  });
  var refreshView = function () {
      refreshPopup();
  };
  interaction.getFeatures().on('add', refreshView);
  interaction.getFeatures().on('remove', refreshView);
  map.addInteraction(interaction);
  </code></pre>
  
  <p><strong>HTML for the Popup</strong></p>
  
  <pre><code>&lt;div class="popover"&gt;
      &lt;div class="arrow"&gt;&lt;/div&gt;
      &lt;h3 class="popover-title" style="display: none;"&gt;&lt;/h3&gt;
      &lt;div class="popover-content"&gt;
          &lt;table class="popupTable table table-bordered table-hover"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;&lt;td&gt;ID: &lt;/td&gt;&lt;td&gt;id&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;value1/td&gt;&lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;value2&lt;/td&gt;&lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button class="btn save-feature"&gt;Save&lt;/button&gt;
          &lt;button class="btn delete-feature"&gt;Delete&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>