ConvertKit JS form is messing with my Alpine event handlers??

[mhanberg]

I have build a fzf widget for my blog with Alpine and it works well, except for the page that has my convert kit signup form.

On that page, when i type in the input element, it always sends 0 instead of what you had typed.

I have absolutely no clue as to why, but if anyone has any ideas, that would be really helpful.

CleanShot.2024-10-16.at.12.33.26.mp4

The code is written in an Elixir HTML dsl, but it should be easy to understand

    temple do
      aside id: "nav",
            "x-data": "sidebar",
            class: [{@class, true}, "lg:mt-8 lg:sticky lg:top-8 lg:self-start pb-4": true] do
        h2 class: "text-2xl mb-2 flex gap-1" do
          div class: "flex-shrink-0", do: "Mitchell Hanberg > "

          div class: "flex bg-black flex-1 w-full flex-grow" do
            input "x-model": "search",
                  id: "terminal",
                  "@keyup.enter": "location.assign(items.at(selected_row).item.permalink)",
                  "x-effect": "items = fzf.find(search.trim()); selected_row = 0;",
                  "@keydown.up.prevent": "selected_row = Math.max(selected_row - 1, 0)",
                  "@keydown.down.prevent":
                    "selected_row = Math.min(selected_row + 1,  items.length - 1)",
                  type: "text",
                  class: "bg-black caret-hacker w-full outline-none peer"

            div class: "animate-pulse absolute left-[15.5ch] peer-focus:hidden",
                "x-show": "search == ''",
                do: "▌"
          end
        end

        ul class: [{@item_width, true}, "text-2xl lg:text-lg": true] do
          template "x-for": "(entry, idx) in items", ":key": "idx" do
            li ":class": """
               {
                'border-l-4 pl-2': true,
                'border-hacker bg-[#2B332D]': is_selected(entry.item.permalink, idx),
                'border-transparent': !is_selected(entry.item.permalink, idx)
               }
               """ do
              a ":href": "entry.item.permalink" do
                template "x-for": "(char, i) in entry.item.name.split('')",
                         ":key": "i" do
                  span "x-text": "char", ":class": "{'text-hacker': entry.positions.has(i)}"
                end
              end
            end
          end
        end
      end

      script do
        """
        document.addEventListener("alpine:init", () => {
          const sidebar_items = #{encode_data(@data["sidebar"])};
          const posts = #{encode_data(Enum.map(@posts, & &1.permalink))};
          const current_permalink = '#{@page.permalink}';
        console.log(sidebar_items);
        console.log(current_permalink);
          Alpine.data("sidebar", () => ({
            fzf: new Fzf(sidebar_items, {selector: (item) => item.name}),
            init() {
              this.items = sidebar_items.map(item => ({item, positions: new Map()}));
            },
            selected_row: 0,
            is_selected(permalink, index) {
              // console.log("running is selected for: ", index);
              let icp = this.is_current_page(permalink);

              let empty_search = ['', undefined, null].includes(this.search)
              // console.log("permalink:", permalink)
              // console.log("icp", icp)
              // console.log("empty search:", empty_search)
              if (!empty_search) {
                return index == this.selected_row;
              } else {
                return icp;
              }
            },
            is_current_page(item) {
              if (item == "/articles") {
                return current_permalink == "/articles" || posts.includes(current_permalink)
              } else {
                return current_permalink == item;
              }
            },
           search: '',
          }));
        });
        """
      end
    end

[SimoTod]

Does it work with x-on:
Probably that templating engine uses @ for something else

[mhanberg]

I'm the author of the templating language (https://github.com/mhanberg/temple), it doesn't use @ for anything.

The alpine component works correctly on all pages except for the one with the foreign JS being executed (the convert kit form)

[mhanberg]

I found a beautiful work around... just wrap the convert kit form in an iframe