title: How to make focus work in Mozila Firefox same as in Google chrome
body: <p>I have a input field, if i click on that focus is present on that, if i delete the content fully in it it stays like this in Google chrome.</p>
  
  <p><a href="https://i.stack.imgur.com/I9q4A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I9q4A.png" alt="Working with Google chrome"></a></p>
  
  <p>But in Mozila Firefox, if i delete content fully then it shows like this,</p>
  
  <p><a href="https://i.stack.imgur.com/4XXt6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4XXt6.png" alt="Working with Mozila Firefox"></a>, but if i type anything then focus comes as in google chrome. </p>
  
  <p>Can anyone please help me to get focus in Mozila Firefox as it is with google chrome when all contents are deleted.</p>
  
  <p>I am hereby sharing HTMl and CSS code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2.title.ng-pristine.ng-valid.ng-not-empty.focused,
  h2.title.ng-pristine.ng-valid.ng-empty,
  h2.title.ng-valid.ng-dirty.ng-not-empty,
  h2.title.ng-valid.ng-not-empty.focused.ng-dirty.ng-valid-parse,
  h2.title.ng-valid.ng-dirty.ng-valid-parse.ng-empty {
    padding: 0px !important;
    margin: 35px 45px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2 class="title" contenteditable="true" ng-model="section.title" ng-focus="focusData.current_focus_index=$index" ng-blur="blurFn($event,$index)" ng-class="{ focused: (focusData.current_focus_index == $index)}" unselectable="on" ng-keydown="disable_enter($event,$index)"
    ng-change="check_section_title($index)"&gt;&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>