Insight on a bug.

[rokyed]

Hi @sergejcodes

Here's a component, a simple input wrapper. But it has a big issue:

• typing something like bob@best.com will stop inputting 1 character after the @ so the value will only be bob@b.

I've tried everything I know to fix this but I am not able.

minze version: 1.10.0

Here's a screenshot:

Also here's the component in question (stripped of any external dependencies besides Minze):

import Minze, { Attrs, EventListeners, MinzeElement, Reactive, Watch } from "minze";
//import * as moment from "moment";
//import {Font} from "../../constants";
//import {Callback} from "../../modules/callback";
//import { MaskOptions, applyMask, parseInlineStyle, generateId } from "../../modules/utils";
//import ClearIcon from 'iconoir/icons/solid/xmark-circle.svg?raw';
//import HidePasswordIcon from 'iconoir/icons/regular/eye.svg?raw';
//import ShowPasswordIcon from 'iconoir/icons/regular/eye-closed.svg?raw';
const ClearIcon = "[x]";
const HidePasswordIcon = "[*]";
const ShowPasswordIcon = "[_]";
const STYLE_PRESETS = {
  "default": {
    css: ``,
  }
}

export interface BField {
  placeholder?: string;
  defaultValue?: string;
  disabled?: boolean;
  error?: string;
  clearable?: boolean;
  mask?: string;
  stylePreset?: string;
  value?: string;
}

export class BField extends MinzeElement {
  reactive: Reactive = [
    ["value", "", true]
  ];
  attrs: Attrs = [
    "placeholder",
    "default-value",
    "disabled",
    "error",
    "clearable",
    "mask",
    "style-preset",
  ];

  static observedAttrs = [
    "default-value",
    "disabled",
    "error",
  ];

  onReady(): void | Promise<void> {
    this.value = this.defaultValue ?? "";
  }

  handleInput(e: InputEvent):void {
    let value = (e.target as HTMLInputElement).value;
    
 /*if (this.mask) {
      console.log("mask", this.mask);
      value = applyMask(value, {
        mask: this.mask as string,
        patternsMap: {
          'A':/[a-zA-Z]/,
          '#':/\d/,
          '*': /./
        } as MaskOptions['patternsMap'],
      })
    }
*/
    this.value = value;
    console.log("input", value);
    this.dispatch("input", value);
  }

  html = () => {
    return `
      <div class="b-field">
        <div class="b-field__input-wrapper">
          <input class="b-field__input" value="${this.value}" type="text" />
          <div class="b-field__clear-icon">
            ${ClearIcon}
          </div>
          <div class="b-field__show-password-icon">
            ${ShowPasswordIcon}
          </div>
          <div class="b-field__hide-password-icon">
            ${HidePasswordIcon}
          </div>
        </div>
        <div class="b-field__error">
          ${this.error ? `<b-error error="${this.error}"></b-error>` : ""}
        </div>
      </div>
    `;
  }

  css = () => {
    return `
      :host {
      }

      .b-field__clear-icon, .b-field__show-password-icon, .b-field__hide-password-icon {
        cursor: pointer;
      }

      ${STYLE_PRESETS[this.stylePreset || "default"].css}
    `;
  }

  eventListeners: EventListeners = [
    ["input", "input", this.handleInput]
  ];
}

Thank you very much for any insight on the issue. I truly appreciate it! I haven't figured out this yet 😞

[rokyed]

I think it has something to do with the template parsing containing @ character.

<input value="bob@test.com"/> 

will break updating

[rokyed]

@sergejcodes I figured out where the issue lies:

At this line of code, the regex will hit anything matching, no matter whether is in the attribute as a value or just the attribute name. https://github.com/n6ai/minze/blob/main/packages/minze/src/lib/minze-element.ts#L807

(?:on:|@)([\w\-:.]+)(?:=(?:"|')?(\w+)(?:"|')?)?

[rokyed]

@sergejcodes I added a fix here, I haven't tested it, but here it is: #268

[sergejcodes]

Hi @rokyed, thanks for contributing! It should be fixed in the new 1.10.1 release.

[rokyed]

Thanks a lot! It did fix the issue 🥇