HTTP request on keyup event in Rails application

Question

I have an input where I am listening to:

const shopFilterProductsInput = document.getElementById("shopFilterProducts");

I am hitting the backend in every keyup (this is in a webpack file)

const filterOffers = (e) => {
  let inputValue = shopFilterProductsInput.value;

  const url = `/shops/${shopId}?query=${inputValue}`;


  fetch(url, {
   method: "GET",
   headers: {
    'X-Requested-With': 'XMLHttpRequest',
    "Content-Type": "application/javascript",
    'Accept': 'application/javascript',
    "X-CSRF-Token": csrfToken,
    "authenticity_token": csrfToken
   }
  })
  .then(function() {
    console.log("response back fetch api")
  })
}

if (shopFilterProductsInput) {
  shopFilterProductsInput.addEventListener("keyup", filterOffers)
}

In the backend, I specify the answer that I want for format js

 def show
    set_shop
    set_user
    set_category
    # @shop.nil? != true ### ?????
    @shop = Shop.find(params[:id])
    query = params[:query]
    if query
      @offers = @shop.offers.search_by_model_and_brand_generic_product_name(query)
      binding.pry
      respond_to do |format|
        format.html { render 'shops/show' }
        format.js
      end
    else
      @offers = @shop.offers
    end
  end

and I have the corresponding show.js.erb file

console.log("filtering pg show.js.erb");
const shopOffersPartial = document.getElementById("shopOffersPartial");
console.log(shopOffersPartial);
const newContent = '<%= j render "shops/shop_offers", offers: @offers %>';
shopOffersPartial.innerHTML = newContent;

Which would update the content of the partial in show.html.erb:

<div id="shopOffersPartial">
   <%= render "shops/shop_offers", offers: @offers %>
</div>

Unfortunately, I never see this message. I just see the response of fetch:

response back from the FETCH api

The GET log is as follows:

Started GET "/shops/1?query=j" for 127.0.0.1 at 2019-03-04 00:47:48 +0100
Processing by ShopsController#show as JS
  Parameters: {"query"=>"j", "id"=>"1"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ /Users/albert/.rbenv/versions/2.4.4/lib/ruby/gems/2.4.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
  Shop Load (0.4ms)  SELECT  "shops".* FROM "shops" WHERE "shops"."user_id" = $1 LIMIT $2  [["user_id", 1], ["LIMIT", 1]]
  ↳ app/controllers/shops_controller.rb:92
  Offer Load (0.4ms)  SELECT "offers".* FROM "offers" WHERE "offers"."shop_id" = $1  [["shop_id", 1]]
  ↳ app/controllers/shops_controller.rb:92
  Shop Load (0.6ms)  SELECT  "shops".* FROM "shops" WHERE "shops"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/shops_controller.rb:50
  Rendering shops/show.js.erb
  Rendered shops/show.js.erb (0.4ms)
Completed 200 OK in 34ms (Views: 17.0ms | ActiveRecord: 1.8ms)

I manage to do a request in js format, I manage to render shops/show.js.erb, but somehow I don't see the message in the console.

I even see the response in the Chrome DevTools:

Any help?

I also tried this:

jQuery + Ajax + Haml. js.erb files not firing