Problem with the focus at the search

Problem with the focus at the search

Posted by: pablo on 20 February 2023, 11:50 pm EST

• 

  pablo

  • Post Options:
  • Link
    Copy

  Posted 20 February 2023, 11:50 pm EST

  Hi, I have a problem with the focus in mobiles.
  
  I have a C1 grid with a search and I execute the focus() with JavaScript at load event like this:

  busqueda.addEventListener("load", function () {
              bsq2 = busqueda.document.getElementById("theSearch2");
   	    bsq2.hidden = false;
              bsq2.children[0].children[0].children[0].children[0].focus();
          })

  That works fine at computer, but in mobile, when the page make the focus, It doesn’t open the keyboard.
  
  ¿there’s another way to make a focus to the search div?

• 

  pablo

  • Post Options:
  • Link
    Copy

  Posted 20 February 2023, 11:52 pm EST

  I have this Div in HTML

  <div id="theSearch2" style="width: 300px;" hidden ></div>

  And this is my Grid

  [code] @Html.C1().TabPanel(“#control-nav-tabs”)

  <!--Creación del FlexGrid-->
  <c1-flex-grid id="theFlexGrid"
                auto-generate-columns="false"
                is-read-only="true"
                sorting-type="SingleColumn"
                class="grid"
                pinning-type="SingleColumn"
                auto-search="true"
                auto-sized-column="true"
                defer-resizing="true"
                validate-edits="true"
                default-row-size="47"
                height="auto" style="max-height: 700px"
                order-by="empleadoTipoCodigo asc">
  
      <c1-flex-grid-column binding="barcoCodigo" header="@Recursos.CimaRes.Codigo" width="100"></c1-flex-grid-column>
      <c1-flex-grid-column binding="barcoNombre" header="@Recursos.CimaRes.Descripcion" width="240"></c1-flex-grid-column>
      <c1-flex-grid-column binding="barcoTipo" header="@Recursos.CimaRes.Tipo_barco" width="240"></c1-flex-grid-column>
      <c1-flex-grid-column binding="barcoMatricula" header="@Recursos.CimaRes.Matricula" width="240"></c1-flex-grid-column>
  
      <c1-items-source source-collection="@Model"></c1-items-source>
  
      <c1-flex-grid-group-panel max-groups="4"
                                placeholder="@Recursos.CimaRes.Agrupar_por"
                                hide-grouped-columns="true">
      </c1-flex-grid-group-panel>
  
      <c1-flex-grid-filter default-filter-type="Both">
          <c1-flex-grid-column-filter column="barcoCodigo" filter-type="FilterType.Both"></c1-flex-grid-column-filter>
          <c1-flex-grid-column-filter column="barcoNombre" filter-type="FilterType.Both"></c1-flex-grid-column-filter>
          <c1-flex-grid-column-filter column="barcoTipo" filter-type="FilterType.Both"></c1-flex-grid-column-filter>
          <c1-flex-grid-column-filter column="barcoMatricula" filter-type="FilterType.Both"></c1-flex-grid-column-filter>
      </c1-flex-grid-filter>
  </c1-flex-grid>
  
  <c1-flex-grid-search id="theSearch" search-all-columns="true" grid="theFlexGrid"></c1-flex-grid-search>
  <c1-flex-grid-search id="theSearch2" search-all-columns="true" grid="theFlexGrid"></c1-flex-grid-search>[/code]
  

• 

  pablo

  • Post Options:
  • Link
    Copy

  Posted 20 February 2023, 11:55 pm EST

  I just made

  bsq2.children[0].children[0].children[0].children[0].focus();

  
  
  because I try with only

  bsq2.focus();

  and that doesn’t work

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 February 2023, 5:45 pm EST

  Hi,
  
  In our investigation, we found that this issue also occurs with the standard HTMLInputElement. So this issue seems OS specific.
  
  Please refer to the attached sample for reference.

  Regards,
  
  Manish Gupta

  FlexGrid_mobile_input_focus.zip