autocorrect custom UIDs - convert humancase to snakecase

[KubaMiszcz]

The problem

it is easy to first make descriptive label then paste it into UID input
but when i paste name of my thing/item - i need to manually valid my own uids - remove spaces etc

Your suggestion

like correcting branches name in VSCode - auto convert pasted text to snake_case (or camel case?)

[jimtng]

not a bad idea. just wondering how we can differentiate this from a manually typed text, or are we going to auto correct that too?

[KubaMiszcz]

manually typed text fires validation error, prevents clicking 'Save'

in VSCode when you paste text eg 'my cool thing', it says it will be converted into 'my_cool_thing' when press enter

i think it will be easier to code, easier to rewrite (just add info next to allowed chars) validate message, and more intuitive

and you see how it looks after correction or if it is good, no need to show validation message

[jimtng]

but when i paste name of my thing/item

Can you explain the steps you normally take to create your thing / item? Do they have names already pre-filled? If they do, then we can take that immediately without needing you to copy paste anything.

[KubaMiszcz]

click on '+' then write label, uid is autogenerated like 'ffd67twq7d', then I rewrite this UID - paste label and make it valid, later fill other properties

and the point is to autoupdate UID during fill label (convert spaces into '_' etc), or (better) after pasting label into uid input - convert label into proper format

exactly like VSCode works when I create new branch, and paste text with spaces

[jimtng]

Would this be a good solution?

I don't know how to do it automatically on paste, because I don't know how to detect that something has been pasted vs typed manually.

This way, it isn't as intrusive, and letting user fix it manually if necessary, or not change the default autogenerated id.

WDYT?

[KubaMiszcz]

there is JS event 'onPaste' maybe it helps, in react/angular there is handlers for it

maybe it helps in plain JS (tested od playground)
html

<input type="text" onpaste="myFunction()" value="Paste something here" size="40">
<p id="demo">asd</p>

JS

function myFunction(){
  let clipboardData = event.clipboardData || window.clipboardData;
  let pastedText = clipboardData.getData('text');

  document.getElementById("demo").innerHTML = "text:" + pastedText;
};

but your solution is also perfect

[jimtng]

It seems that vue's f7-list-input doesn't support @paste event. However, I can add a paste event listener to the input element, so that part works fine.

What's complicated is this:

• What would you do when user doesn't select all the existing text, so the end result will be existing + newly pasted text. Say the existing text is wrong e.g. $$235 abc and user is pasting at the end. Do we fix the existing text too? It makes the whole experience weird.

[KubaMiszcz]

it is a 'helper' feature not 'automate' ;], and it is not so often use
so:
if i add something at the end it corrects only pasted part, if something wrong was here before it breaks the flow so I should update it manually, or rewrite whole

we can autofix if it is only spaces, it is simple space->'_', but if we have more forbiddent chars we need to choose fixed proper replacements

so I think not go into sophistication, if you want correct it manually, feel free, if you dont like pasted-fixed text? correct it by yourself (like now, with validations)

but:
we can paste it as it is like now and fix with wrench like you do, it is only one click, for me it is ok, make replacements as you want, just keep descriptive mean;] but it is no problem with alphanumeric so way with wrench and manually fix accord to valiadiotn rules is DoD for me

eg:
spaces - '_'
'-' - ' _'
$.,/ - remove
etc,

[jimtng]

You might like this: