Describe the bug
Cannot bind multiple keydown trigger actions to single element.
To Reproduce
I am building a calculator for a presentation demo. On a div wrapping the calculator button, I am adding multiple keydown event for each number 0-9. To use the app from the keyboard rather than clicking on each button in the UI. The last keydown event listed seems to be the only trigger action registered.
Expected behavior
I would except the ability to add multiple keydown trigger actions based on each specified like Vue with the latest one winning if there was a conflict.
Desktop (please complete the following information):
- OS: Windows 10 Build 17763.557
- Browser Chrome
- Version 75.0.3770.100
Additional context
// resources/views/livewire/calculator.blade.php
<?php
<div class="flex w-1/2 mx-auto justify-center">
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md mt-8"
wire:keydown.enter="calculate"
wire:keydown.1="setValue(1)"
wire:keydown.2="setValue(2)"
wire:keydown.3="setValue(3)"
...did not add the rest since it is not working...>
<div class="flex">
@component('_calculator.button', ['color' => 'red', 'value' => 'C'])@endcomponent
<input disabled class="text-right appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mx-2 my-2 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" value="{{ $currentNumber }}" placeholder="LIVEWIRE">
</div>
<div class="flex">
@component('_calculator.button', ['color' => 'blue', 'value' => 7])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => 8])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => 9])@endcomponent
@component('_calculator.button', ['color' => 'orange', 'value' => '/'])@endcomponent
</div>
<div class="flex">
@component('_calculator.button', ['color' => 'blue', 'value' => 4])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => 5])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => 6])@endcomponent
@component('_calculator.button', ['color' => 'orange', 'value' => '*'])@endcomponent
</div>
<div class="flex">
@component('_calculator.button', ['color' => 'blue', 'value' => 1])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => 2])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => 3])@endcomponent
@component('_calculator.button', ['color' => 'orange', 'value' => '-'])@endcomponent
</div>
<div class="flex">
@component('_calculator.button', ['color' => 'blue', 'value' => 0])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => '.'])@endcomponent
@component('_calculator.button', ['color' => 'blue', 'value' => '='])@endcomponent
@component('_calculator.button', ['color' => 'orange', 'value' => '+'])@endcomponent
</div>
</div>
</div>
// resources/views/_calculator/button.blade.php
<? php
<button
class="flex-1 m-2 bg-{{ $color }}-500 hover:bg-{{ $color }}-400 text-white font-bold py-2 px-4 border-b-4 border-{{ $color }}-700 hover:border-{{ $color }}-500 rounded"
@if (is_numeric($value))
wire:click="setValue({{ $value }})"
@elseif ($value == ".")
wire:click="setValue('.')"
@elseif ($value === 'C')
wire:click="setValue('C')"
@elseif ($value === '=')
wire:click="calculate()"
@else
wire:click="setOperator('{{ $value }}')"
@endif>
{{ $value }}
</button>
// app/Http/Livewire/Calculator
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Calculator extends Component
{
#TODO History
public $previousNumber;
public $currentNumber;
public $operator;
public function render()
{
return view('livewire.calculator');
}
public function setValue($value)
{
if ($value === 'C') {
$this->currentNumber = NULL;
return;
}
$this->currentNumber = (string) $this->currentNumber . (string) $value;
}
public function setOperator($function)
{
$this->operator = $function;
$this->previousNumber = $this->currentNumber;
$this->currentNumber = NULL;
}
public function calculate() {
switch ($this->operator) {
case "*":
$this->currentNumber = $this->currentNumber * $this->previousNumber;
break;
case "/":
$this->currentNumber = $this->previousNumber / $this->currentNumber;
break;
case "+":
$this->currentNumber = $this->currentNumber + $this->previousNumber;
break;
case "-":
$this->currentNumber = $this->previousNumber - $this->currentNumber;
break;
}
$this->operator = NULL;
$this->previousNumber = NULL;
}
}
// web.php
<?php
Route::livewire('/calculator', 'calculator');
Describe the bug
Cannot bind multiple keydown trigger actions to single element.
To Reproduce
I am building a calculator for a presentation demo. On a div wrapping the calculator button, I am adding multiple keydown event for each number 0-9. To use the app from the keyboard rather than clicking on each button in the UI. The last keydown event listed seems to be the only trigger action registered.
Expected behavior
I would except the ability to add multiple keydown trigger actions based on each specified like Vue with the latest one winning if there was a conflict.
Desktop (please complete the following information):
Additional context