Problem sending phx-value-* on key event

Questions / Help
1

Hi,

I’ve encountered a problem sending phx-value-* on key event.

In my template I have:

<%= text_input(@form, @key,
   phx_keydown: "suggest_drivers",
   phx_value_carrier_id: @carrier_id,
   phx_debounce: "10", 
   name: "drivers",
   id: "driver-input") %>

The important line is phx_value_carrier_id: @carrier_id - I confirmed the @carrier_id value is correct, see the rendered input field:

<input id="driver-input" name="drivers" phx-debounce="10" phx-keydown="suggest_drivers" phx-value-carrier-id="711205c2-69c3-11ea-9f03-186590d7702f" type="text">

The problem is that in my callback function I don’t get carrier-id from the payload as expected:

def handle_event("suggest_drivers", payload, socket) do
    carrier_id = payload["carrier-id"]

    **=> IO.inspect carrier_id -> nil**

I use:

  • liveview 0.8.1
  • phoenix 1.4.10
  • node.js 12.10.0
  • npm 6.10.3
  • chrome 80.0.3987.149

Any help is highly appreciated!

2

Once You use

carrier_id

Then You use

carrier-id

You can always inspect to see what You get.

IO.inspect payload
3

IO.inspect payload yields:

%{
  "altKey" => false,
  "charCode" => 0,
  "code" => "KeyR",
  "ctrlKey" => false,
  "key" => "r",
  "keyCode" => 82,
  "location" => 0,
  "metaKey" => false,
  "repeat" => false,
  "shiftKey" => false,
  "value" => "r",
  "which" => 82
}

so no carrier-id or carrier_id :slight_smile:

4

Your code snippets worked for me and I could see carrier-id in payload. Something else is afoot here. I know “your code is actually correct” doesn’t help much :slight_smile:, but the error is elsewhere.

5

interesting, thanks for trying it out!

6

I have tested some more and I’m ready to bet you’re not on liveview 0.8.1

  1. The payload keys are different on 0.8.1 than the ones you posted
%{
  "altKey" => false,
  "carrier-id" => "711205c2-69c3-11ea-9f03-186590d7702f",
  "code" => "KeyR",
  "ctrlKey" => false,
  "key" => "r",
  "location" => 0,
  "metaKey" => false, 
  "repeat" => false,
  "shiftKey" => false,
  "value" => "r"
}
  1. The payload keys on 0.6.0 are exactly like yours:
%{
  "altKey" => false,
  "charCode" => 0,
  "code" => "KeyR",
  "ctrlKey" => false,
  "key" => "r",
  "keyCode" => 82,
  "location" => 0,
  "metaKey" => false,
  "repeat" => false,
  "shiftKey" => false,
  "value" => "r",
  "which" => 82
}

On 0.6.0, I don’t see the carrier-id. This was a known bug fixed in 0.7.0.

1 Like
7

You might need to clear your node deps and run npm install again if you recently upgraded your LiveView version.

2 Likes
8

Thanks for taking your time to check for different versions! You lost the bet, however :smile: I was indeed on 0.8.1 liveview version.

The problem was in the structure of my umbrella project and paths to dependencies inside of every app, but I managed to solve that issue.

1 Like