Dziwne działanie przy zaznaczaniu fragmentu tekstu

Dziwne działanie przy zaznaczaniu fragmentu tekstu
KO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 466
0

Cześć,
Piszę własny komponent dla pola z datą w Blazor. Założenie jest takie, że jeśli pole z datą jest aktywne to część daty, która jest aktywna zawsze powinna być zaznaczona (np. rok, miesiąc lub dzień - jak poniżej).
screenshot-20241026235311.png

Jeśli wcisnę na klawiaturze strzałkę w górę lub w dół to chciałbym, aby data zmieniła się o 1 dzień, ale żeby zaznaczenie zostało.
Poniżej funkcja, która to robi:

Kopiuj
private async Task OnKeyDownEvent(KeyboardEventArgs e)
{
  preventDefault = true;

  switch(e.Code)
      {
      case "ArrowUp":
          {
          if(CurrentValue != null)
              {
              CurrentValue = CurrentValue.Value.AddDays(1);
              }
          break;
          }
      case "ArrowDown":
          {
          if(CurrentValue != null)
              {
              CurrentValue = CurrentValue.Value.AddDays(-1);
              }
          break;
          }
      }
  await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ReferenceToInputDate, 0, 2);
  await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ReferenceToInputDate, 0, 2); //<- DLACZEGO TO MUSI BYĆ DRUGI RAZ ŻEBY ZADZIAŁAŁO ZAZNACZENIE??
  }

Problem jest taki, że:
Jeśli wywołam funkcję SelectionPartOfText tylko raz to fragment daty się nie zaznacza!
Ale jak wywołam tą funkcję dwukrotnie, jedna po drugiej, to pole z datą się zaznacza...
Jeśli wywołam tą funkcję na początku funkcji OnKeyDownEvent a następnie na końcu funkcji jak poniżej to również pole będzie zaznaczone.

Kopiuj
private async Task OnKeyDownEvent(KeyboardEventArgs e)
    {
    preventDefault = true;
    await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ReferenceToInputDate, 0, 2); //PIERWSZE WYWOŁANIE TEJ FUNKCJI (BEZ TEGO NIE ZADZIAŁA)
    switch(e.Code)
        {
        case "ArrowUp":
            {
            if(CurrentValue != null)
                {
                CurrentValue = CurrentValue.Value.AddDays(1);
                }
            break;
            }
        case "ArrowDown":
            {
            if(CurrentValue != null)
                {
                CurrentValue = CurrentValue.Value.AddDays(-1);
                }
            break;
            }
        }
    await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ReferenceToInputDate, 0, 2); //<- DRUGIE WYWOŁANIE FUNKCJI (WYMAGANE DO PRAWIDŁOWEGO DZIAŁANIA - DLACZEGO?)
    }

Czy może mi ktoś wyjaśnić dlaczego tak się dzieje? Dlaczego muszę dwa razy wywoływać tą samą funkcję JS?

Z góry bardzo dziękuję za pomoc!

ŁF
  • Rejestracja: dni
  • Ostatnio: dni
1

Co robi "SelectionPartOfText" (BTW nazwa jest trochę niegramatyczna)? Zmiana wartości inputa czyści zaznaczenie, więc ten pierwszy call raczej nie ma szans zadziałać.
Próbowałeś przejechać wygenerowany js debugerem w przeglądarce?

KO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 466
0

@ŁF funkcja SelectionPartOfText to:

Kopiuj
function SelectionPartOfText(ref, start_position, end_position) {
	ref.setSelectionRange(start_position, end_position);
}

Odnośnie debugera to nie - nie mam takiego doświadczenia :)

Odnośnie zmiany wartości inputa to jeśli pierwszy call nie ma szans się wykonać to ten drugi również - w obu wywołaniach jedyne co robimy to zaznaczamy fragment tekstu. Więc jak jest coś jeszcze później to skasuje oba zaznaczenia.

ŁF
  • Rejestracja: dni
  • Ostatnio: dni
1
Kofcio napisał(a):

Odnośnie zmiany wartości inputa to jeśli pierwszy call nie ma szans się wykonać to ten drugi również - w obu wywołaniach jedyne co robimy to zaznaczamy fragment tekstu. Więc jak jest coś jeszcze później to skasuje oba zaznaczenia.

Ale pomiędzy pierwszym, a drugim zaznaczeniem zmieniasz zawartość inputa. Jeśli użyjesz tylko drugiego wywołania, to co się zadzieje?

KO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 466
0

@ŁF w tym drugim case'ie zaznaczam na początku funkcji i na końcu funkcji (po zamianie inputa), ale w tym pierwszym case'ie wywołuję obie funkcje jedna pod drugą.

Jak użyję tylko jednej funkcji (tej na samym końcu tj. po zmianie wartości inputa) to zaznaczenie w ogóle nie działa.
Teraz sobie jeszcze uświadomiłem, że po wywołaniu OnKyeDown jest jeszcze OnKyeUp, które zapewne kasuje zaznaczenie.
Ale intryguje mnie dlaczego w takim razie dwukrotne wywołanie funkcji zaznaczenia jedna pod drugą nie kasuje tego zaznaczenia?
Może ma to związek z tym, że to jest zdarzenie asynchroniczne i jedno jest wywoływane od razu a drugie wpada w kolejkę (?).

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.