Answers

• kthorngren Posts: 21,328Questions: 26Answers: 4,949

  June 2023

  Are you saying that while typing in an input the input looses focus?

  Or that when clicking on the input the focus (blue border) doesn't appear?

  It will be difficult to debug without seeing it. When you say search field, filters and inputs are the filters and inputs placed into the footer or header for searching? If so these aren't Datatables specific elements so the problem is likely not due to Datatables.

  If no test case then provide more details about your environment. I did a quick search and found a lot of questions on Stack Overflow about React environments loosing focus. It might be worth searching Stack Overflow for similar issues to yours.

  Kevin
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  June 2023 edited June 2023

  Hi Kevin,

  It doesn't lose focus while typing.

  It just (at random times) won't react to activation. You can type, but you can't tell if the field is activated.

  I create my footer for filtering

  //CREATE FOOTER FOR FILTERING
  $("#table").append('<tfoot><th></th><th class = "filter"></th><th class = "filter"></th><th class = "filter"></th><th class = "filter"></th></tfoot>');

  //ADD THE COLUMN FILTERING (SEARCH INPUT)
  $('#table tfoot th.filter').each( function () {
  var title = $('#table thead th').eq( $(this).index() ).text();
  $(this).html( '<input type="text" placeholder="&#xF002" style="font-family:Arial, FontAwesome" />' );
  } );

  I suspected it was a non-Datatables issue. I will look into the stack overflow thread.

  Thanks,
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  June 2023

  Have you got an Ajax reload of content on the page, or some other action that is happening on a setTimeout or an interval?

  Failing that, I think we'd need a test case showing the issue please.

  Allan
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  July 2023

  Hi Allan, Thanks for the inquiry. It’s not quite an ajax reload, but I do inject new data into the table which I suspected is causing the issue. It’s hard to say though because it doesn’t happen every time… It will just happen randomly. I don’t believe I have any on setTimeouts or intervals.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  July 2023

  I do inject new data into the table which I suspected is causing the issue

  How are you doing that?

  Allan
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  July 2023 edited July 2023

  My dataTables table is in a webviewer inside of Claris Filemaker software. I use a script function that will fire off javascript inside the webviewer. The code generally looks something like this: (the variables ($) are replaced with data in a separate filemaker step). This all works as I intend it to.

  (function(){
  var pos = $('div.dataTables_scrollBody').scrollTop();
  var table = $('#table').DataTable();
  
  var rowId = $('#table').dataTable()
     .fnFindCellRowIndexes('$$pk', 0);
  
  var titleIndex = table.column( 'title:name' ).index();
  var firstIndex = table.column( 'first:name' ).index();
  var lastIndex = table.column( 'last:name' ).index();
  
  table
         .cell(rowId, titleIndex)
         .data('$title')
         .draw(false);
  
  table
         .cell(rowId, firstIndex)
         .data('$first')
         .draw(false);
  
  
  table
         .cell(rowId, lastIndex)
         .data('$last')
         .draw(false);
  
  $('.dataTables_scrollBody').scrollTop(pos);
  
  })
  

  Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  July 2023

  I see - you are using cell().data() to update the table cells. That should be absolutely fine. I was concerned that you might just be injecting the HTML into the document, but that isn't the case.

  I'm sorry to say it, but I really would need to see the page to be able to debug it. You can drop me a PM if you can't make the page public, by clicking my user name above and then "Send message".

  Allan
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  August 2023

  Hi Allan,

  Here’s a fiddle of a one record table to show you my code. I know it is a lot, but since i can’t figure out when and why it happens it’s hard to isolate the parts that may be an issue.

  https://jsfiddle.net/thegamechangerpro/2xrf3qek/

  I am so so grateful for any tips or pointers!
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  August 2023

  There is nothing obvious I'm afraid. To confirm, when this happens, all events on the DataTable do nothing when this happens? Clicking to sort, typing to filter, etc?

  I think the only way to trace such a thing would be to run a performance trace on the page, wait for it to happen and then check what functions were called. A live page showing the issue would be needed if you'd like any help with that.

  Regards,
  Allan
• thegamechangerpro Posts: 81Questions: 30Answers: 1

  August 2023

  Thanks for the consideration Allan, Everything behaves as it should EXCEPT the focus.
  No cursor, no field highlight. I can select the text inside the field and type as normal though.

  Very puzzling. I’m afraid a live page isn’t possible since I use datatables inside a webviewer inside of an application.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  August 2023

  Sounds like something might be attempting to capture the focus.

  An inspector performance recording is definitely the way to go with this, to see what is happening at that point.

  Allan