Cypress assert text - javascript

I have a problem with thise piece of code in the error summary that I need to assert:
<div id="#prices-form-wizard_es_" class ="errorSummary formSummary" style="display"> == $0
<ul>
<li>
::marker
Lieferbeginn muss mind. 20 Werktage in der Zukunft liegen
</li>
When I try to assert this text by using this code:
cy.get('.errorSummary > ul > li').eq(0)
.should('have.text', 'Lieferbeginn muss mind. 20 Werktage in der Zukunft liegen')
I get the error message:
AssertionError
Timed out retrying after 20000ms:
expected '<li>' to have text 'Lieferbeginn muss mind. 20 Werktage in der Zukunft liegen',
but the text was 'dummy'
I suppose the ::marker entry causes the problem here, but I do not know a workaround for this problem.
Complete HTML:
<form novalidate="novalidate" id="prices-form-wizard" action="test" method="post" data-dashlane-rid="86657b96f87d2628" style="position: relative;" data-form-type="other">
<input type="hidden" value="VEpQdDJCdE5uRDNBY2dCbE9tb1d0aE5FVEJlbUtJZjTHM5EBAf5bb250N_5-qprVWUq4nbUElJO1EnMXhm39hA==" name="YII_CSRF_TOKEN"><div class="successSummary form-submit-summary" style="display: none;">
<p>Änderungen gespeichert</p>
<svg class="svg-inline--fa fa-times-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1a12 12 0 0 1 0 17L338 377.6a12 12 0 0 1-17 0L256 312l-65.1 65.6a12 12 0 0 1-17 0L134.4 338a12 12 0 0 1 0-17l65.6-65-65.6-65.1a12 12 0 0 1 0-17l39.6-39.6a12 12 0 0 1 17 0l65 65.7 65.1-65.6a12 12 0 0 1 17 0l39.6 39.6a12 12 0 0 1 0 17L312 256z"></path><path class="fa-primary" fill="currentColor" d="M377.6 321.1a12 12 0 0 1 0 17L338 377.6a12 12 0 0 1-17 0L256 312l-65.1 65.6a12 12 0 0 1-17 0L134.4 338a12 12 0 0 1 0-17l65.6-65-65.6-65.1a12 12 0 0 1 0-17l39.6-39.6a12 12 0 0 1 17 0l65 65.7 65.1-65.6a12 12 0 0 1 17 0l39.6 39.6a12 12 0 0 1 0 17L312 256z"></path></g></svg><!-- <i class="fad fa-times-circle"></i> -->
</div><div id="prices-form-wizard_es_" class="errorSummary formSummary" style="display: flow-root;"><a href="javascript:void(0)" class="summaryClose" onclick="$('#prices-form-wizard_es_').slideUp();return false;">
<svg class="svg-inline--fa fa-times-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1a12 12 0 0 1 0 17L338 377.6a12 12 0 0 1-17 0L256 312l-65.1 65.6a12 12 0 0 1-17 0L134.4 338a12 12 0 0 1 0-17l65.6-65-65.6-65.1a12 12 0 0 1 0-17l39.6-39.6a12 12 0 0 1 17 0l65 65.7 65.1-65.6a12 12 0 0 1 17 0l39.6 39.6a12 12 0 0 1 0 17L312 256z"></path><path class="fa-primary" fill="currentColor" d="M377.6 321.1a12 12 0 0 1 0 17L338 377.6a12 12 0 0 1-17 0L256 312l-65.1 65.6a12 12 0 0 1-17 0L134.4 338a12 12 0 0 1 0-17l65.6-65-65.6-65.1a12 12 0 0 1 0-17l39.6-39.6a12 12 0 0 1 17 0l65 65.7 65.1-65.6a12 12 0 0 1 17 0l39.6 39.6a12 12 0 0 1 0 17L312 256z"></path></g></svg><!-- <i class="fad fa-times-circle"></i> --></a>
<ul><li>Lieferbeginn muss mind. 20 Werktage in der Zukunft liegen</li><li>Lieferende muss ausgefüllt sein, um Preise für diesen Tarif abzufragen</li></ul></div><input name="PricesWizardForm[tariff_type]" id="PricesWizardForm_tariff_type" type="hidden" value="1">
<div class="form-section multi-flex">
<div class="section-part">
<div class="portlet-separator">
<span>Produkt & Preis</span>
</div>
...

Can you try with id. As id's are unique on the webpage its always a good practice to use id's if they are available.
cy.get('#prices-form-wizard_es_').should('include.text', 'Lieferbeginn muss mind. 20 Werktage in der Zukunft liegen')

Related

Another option to open SVG menu links in new browser tabs?

I'm wrangling some JavaScript code for a navbar menu on my website:
menuOptions : {
'Home' : '/',
'About' : '/about',
'Projects' : '/projects',
'Contact' : '/contact',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>' : 'https://Link01.com',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>' : 'https://Link02.com',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" fill-rule="evenodd" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" clip-rule="evenodd"></path></svg>' : 'https://Link03.com',
},
I’ve tried the <a href> call below…
menuOptions : {
'Home' : '/',
'About' : '/about',
'Projects' : '/projects',
'Contact' : '/contact',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>' : '#',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>' : '#',
'<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" fill-rule="evenodd" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" clip-rule="evenodd"></path></svg>' : '#',
},
The above works for me... however, this method gets in the way of some backend hover stylings.
Please pardon my coding lingo which I'm sure is rough around the edges. Is there another way to perhaps call a backend function to open the SVG links in new browser tabs, without sacrificing my fade hover stylings?
Thanks in advance!

How to detect when user first starts typing text into password field, without being triggered by browser autofills/autocompletes

I've looked through similar questions on stack, but have not found the answer I am looking for.
I have a password field with a button that toggles visibility of the password, so the user can ensure no typoes if desired. However, I do not want this button to be used to view people's saved passwords by other people who may have access to the same computer.
So my solution was, to not enable this visibility toggle button until the user has typed something into the password field. I cannot figure out how to do this however, since any event I use to figure out when the user starts typing, is also being used by the browser when it autofills/autocompletes. I've tried the change, input, and keyup events, and each of them seems to be fired by the browser automatically as soon as the field becomes visible and it autofills a saved password. Using Chrome for testing at the moment.
html:
<div class="input-group">
<input type="password" class="form-control needs-validation" id="sign-up-password" name="sign_up_password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
<button type="button" class="btn btn-secondary password-visibility-toggle" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash d-none" viewBox="0 0 16 16">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
</svg>
</button>
</div>
javascript
// password visibility toggles
document.querySelectorAll( '.password-visibility-toggle' ).forEach( ( passwordVisibilityButton ) => {
const inputGroup = passwordVisibilityButton.closest( '.input-group' );
const passwordInput = inputGroup.querySelector( 'input' );
passwordInput.addEventListener( 'change', ( event ) => {
console.log( 'test' );
if ( passwordVisibilityButton.disabled ) {
passwordVisibilityButton.disabled = false;
passwordVisibilityButton.addEventListener( 'click', ( event ) => {
if ( passwordInput.getAttribute( 'type' ) == 'password' ) {
passwordInput.type = 'text';
inputGroup.querySelector( '.bi-eye' ).classList.add( 'd-none' );
inputGroup.querySelector( '.bi-eye-slash' ).classList.remove( 'd-none' );
} else {
passwordInput.type = 'password';
inputGroup.querySelector( '.bi-eye' ).classList.remove( 'd-none' );
inputGroup.querySelector( '.bi-eye-slash' ).classList.add( 'd-none' );
}
} );
}
} );
} );
This code just triggers before the user inputs anything and enables the toggle button. Any ideas or advice to fix appreciated. Also using bootstrap 5.2 if that matters.
It seems that behavior of input type="password" is totally under the browser control nowadays. Thankfully, the input type="text" is still libre and we can use it as we please. Thus, instead of fighting with that, we can create our own password field, albeit without password manager feature which anyway is not what we actually want on a communal computer. So, here it is:
const toggleMap = {show: 'hide', hide: 'show'};
const group = document.querySelector( '.input-group' );
const password = group.querySelector( '#sign-up-password' );
const passmask = group.querySelector( '#sign-up-passmask' );
const toggle = group.querySelector( '.password-visibility-toggle' );
toggle.addEventListener( 'click', () => {
group.dataset.toggle = toggleMap[group.dataset.toggle];
});
password.addEventListener( 'input', event => {
const value = event.target.value;
passmask.value = value.replace(/./g, '*');
if (toggle.disabled = !value.length)
group.dataset.toggle = 'hide';
});
.input {
position: relative;
}
.input > input {
font-family: monospace;
}
#sign-up-password,
#sign-up-password::selection {
background: transparent;
caret-color: black;
}
#sign-up-password::selection {
background: #F236;
}
#sign-up-passmask {
position: absolute;
display: flex;
z-index: -1;
top: 0;
border-color: transparent;
}
.input-group[data-toggle='hide'] > .password-visibility-toggle > .bi-eye,
.input-group[data-toggle='show'] > .password-visibility-toggle > .bi-eye-slash {
display: none;
}
.input-group[data-toggle='hide'] #sign-up-password,
.input-group[data-toggle='show'] #sign-up-passmask {
color: transparent;
}
<div class="input-group" data-toggle="hide">
<span class="input">
<input type="text" class="form-control needs-validation" id="sign-up-password" name="sign_up_password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
<input type="text" id="sign-up-passmask">
</span>
<button type="button" class="btn btn-secondary password-visibility-toggle" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash d-none" viewBox="0 0 16 16">
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
</svg>
</button>
</div>

tooltip function for onmouseover and onclick event

I have 5 links with tooltip hovers on each one except the last one. The reason the last one is different is because I'm using the tooltip to show the user their data was copied after the link was clicked. I would still like to have a hover for that link like the other ones that tells the user what the button does before they click it. I've included a sample below. I'd appreciate it if someone could help me figure out how to add the hover tool tip on the last link as well as having it still say "copied" after it was clicked.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({trigger: 'click',placement: 'bottom'});
});
$(document).ready(function(){
$('[card-toggle="tooltip"]').tooltip();
});
function hideTooltip() {
setTimeout(function() {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 1000);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div style="padding:50px;">
<a href="#" card-toggle="tooltip" data-placement="top" title="Edit link data" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link stats" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
<path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="Visit link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square-fill" viewBox="0 0 16 16">
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</a>
<a href="#" id="#hi" data-toggle="tooltip" title="Copied!" data-placement="bottom" data-clipboard-text="{{base_url}}{{url.short_url}}" onclick="hideTooltip()" onmouseover="$('#hi').tooltip({title:'Copy'})" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16">
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z" />
</svg>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
$(document).ready(function(){
$('[card-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').tooltip({title: function () { return this.dataset.title }});
});
function update(title) {
$('[data-toggle="tooltip"]').tooltip('hide');
$('[data-toggle="tooltip"]').attr('data-title', title);
$('[data-toggle="tooltip"]').tooltip('show');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div style="padding:50px;">
<a href="#" card-toggle="tooltip" data-placement="top" title="Edit link data" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link stats" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-fill" viewBox="0 0 16 16">
<path d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="Visit link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square-fill" viewBox="0 0 16 16">
<path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM5.904 10.803L10 6.707v2.768a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-.5-.5H6.525a.5.5 0 1 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 .707.707z" />
</svg>
</a>
<a href="#" card-toggle="tooltip" data-placement="top" title="View link" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</a>
<a href="#" id="#hi" data-toggle="tooltip" data-title="Copy" data-placement="bottom" data-clipboard-text="{{base_url}}{{url.short_url}}" onclick="update('Coppied!')" onpointerenter="update('Copy')" class="card-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16">
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z" />
</svg>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

How to copy/paste in HTML?

I have a site with Drupal 8 and I want to do a "copy" text with a button in TWIG.
How can I do this ?
I need to make a copy to two different place on the same page :
<div>
<small id="copy-to-clipboard-text-share">{{ url('<current>') }}</small>
<button id="copy-to-clipboard-btn-share" class="btn btn-default btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16"><path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/></svg>
</button>
</div>
<div>
<small id="copy-to-clipboard-text-btc">{{ group.field_groupe_donation.value }}</small>
<button id="copy-to-clipboard-btn-btc" class="btn btn-default btn-sm" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16"><path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/></svg>
</button>
</div>

Button icons are making button names undefined

When I put an icon inside a button, the name and the value property of the button becomes undefined.
listSpendings() {
var mapped = this.props.money.transes.slice(0).reverse().map(trans => {
return (
<div key={trans._id} className="smoothbackground z-depth-3">
<li key={trans._id} className="collection-item" style={{
textDecoration: trans.crossedOut ? "line-through" : "none"
}}> {trans.who} spent ${trans.amount} on {trans.info}
<button onClick={this.handleClickChange} type="submit" className="btn-floating btn-small waves-effect waves-light align-right-button" name="CrossOut" value={trans._id}>
X
</button>
</li>
</div>
)
})
return mapped;
}
This function works without any issues. This is the handleClickChange,
handleClickChange = event => {this.setState({ name: event.target.name, transId: event.target.value}); console.log(event.target.name);}
console.log(event.target.name); logs CrossOut like it should. Because that's the button's name.
However, when I put <i class="material-icons">delete</i> instead of the X you see in the code, console.log(event.target.name); logs undefined.
<i class="material-icons">delete</i> is a delete icon and it properly gets displayed on the screen, inside the button. In any case, I've also tried another icon. This is the trash icon from bootstrap.
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
This one also gets displayed but the console.log(event.target.name); also logs undefined.
Any ideas?
svg element does not have name attribute.
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
If you use console.log(event.target.fill), you will get currentColor. Because, svg element contains fill attribute. In case of console.log(event.target.hello), you will get undefined. That's because, there is no hello attribute in this HTML element currently.
Edit
Please, check if there is any defined eventlistener for svg elements.

Categories