Custom HTML Block Search Inputs Lose Focus to Default Search Bar

Frappe Framework Customization
1

Hello Community!

I have a Custom HTML Block with two search inputs. I have an issue that typing in either of the search inputs causes the focus (cursor/pointer) to jump automatically to Frappe’s default search bar.

This issue does NOT happen when viewing the block on Form View of Custom HTML Block, i.e., “http://localhost/app/custom-html-block/Guest-Search”

However, it is persistent when the Custom HTML Block is added to any Workspace and viewed from there.

Here are my codes:

<div class="container" style="margin-bottom: 20px;">
    <div class="d-flex justify-content-between align-items-center" style="margin-bottom: 20px;">
        <h3 style="color:rgb(126, 72, 25); " class="main-title">Guest location</h3>
      
    </div>

<div class="row mb-5">
        <div class="col-md-6 mb-3">
            <input type="text" class="form-control" placeholder="Search By Guest" id="guest-input" tabindex="-1">
        </div>
        <div class="col-md-6 mb-3">
            <input type="text" class="form-control" placeholder="Search By Event" id="event-input" tabindex="-1">
        </div>
        
    </div>

    <table class="table table-bordered my-table" id="table-data">
        <thead style="color:rgb(126, 72, 25); font-weight: bold;">
            <tr>
                <th>Guest</th>
                <th>Guest Name</th>
                <th>Invitation</th>
                <th>Event</th>
                <th>Date/Time</th>
                <th>Location Type</th>
                <th>Location Name</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be dynamically inserted here using JavaScript -->
        </tbody>
    </table>
</div>

 root_element.querySelector('#guest-input').addEventListener('input', function() {
     updateTable();
 });

 root_element.querySelector('#event-input').addEventListener('input', function() {
     updateTable();
 });

function updateTable() {
    var guest = root_element.querySelector('#guest-input').value;
    var event = root_element.querySelector('#event-input').value;

    frappe.call({
        method: 'my.magic.logic.path',
        args: {
            
        },
        callback: function(r) {
            var data = r.message;
            var tbody = root_element.querySelector('#table-data tbody');
            tbody.innerHTML = ''; // Clear previous data
            if (data && data.length > 0) {
                data.forEach(function(item) {
                    var row = `<tr>
                        //my table
                    </tr>`;
                    tbody.insertAdjacentHTML('beforeend', row);
                });
            } else {
                var noDataHTML = `<tr><td colspan="7">No data available</td></tr>`;
                tbody.insertAdjacentHTML('beforeend', noDataHTML);
            }
        }
    });
}

// Initial load
updateTable();

Things I tried:

  1. Adding tabindex="-1" to the HTML.
  2. In JavaScript, replace the first two statements with:
root_element.querySelector('#guest-input').addEventListener('input', function(event) {
  event.stopPropagation();
  updateTable();
});

root_element.querySelector('#event-input').addEventListener('input', function(event) {
  event.stopPropagation();
  updateTable();
});

// Add these lines to prevent the default search behavior
root_element.querySelector('#guest-input').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
  }
});

root_element.querySelector('#event-input').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
  }
});

None helped. Still, whenever I type, it goes to the awesomebar.

Only copy and paste works though.

Any hints?

Regards

2

I know, I tried to add the search bar a few days ago for the below post but had no success, it’s redirects to the awesome bar.

It’s tricky to develop the search bar.

3

Thanks for the confirmation, knowing that you had the problem and tried for a few days stopped me from trying more :sweat_smile:

4

I solved my problem, here is my updated code if you needed:

root_element.querySelector('#guest-input').addEventListener('keydown', function(event) {
  event.stopPropagation();
  if (event.key === 'Enter') {
    event.preventDefault();
  }
});

root_element.querySelector('#guest-input').addEventListener('input', function() {
  updateTable();
});

root_element.querySelector('#event-input').addEventListener('keydown', function(event) {
  event.stopPropagation();
  if (event.key === 'Enter') {
    event.preventDefault();
  }
});

root_element.querySelector('#event-input').addEventListener('input', function() {
  updateTable();
});

// Rest of my JavaScript code...
3 Likes
5

:raised_hand: @ahassoun I am interest to know how the translation works within HTML Blocks, lets say a user changes the language how do you manage it?
I have tried to use e.g {{ __(“Guest”) }} but it has not helped

    <table class="table table-bordered my-table" id="table-data">
        <thead style="color:rgb(126, 72, 25); font-weight: bold;">
            <tr>
                <th>Guest</th>
                <th>Guest Name</th>
                <th>Invitation</th>
                <th>Event</th>
                <th>Date/Time</th>
                <th>Location Type</th>
                <th>Location Name</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be dynamically inserted here using JavaScript -->
        </tbody>
    </table>