This bug occurs not just in my code, but also on the Materialize documentation site, so I will use their code as an example:
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
This works fine with mouse events. But on my android mobile phone screen, it is impossible to select the option I want. I either get another option or none. The feature is initialized as instructed, with
$(document).ready(function(){
$('select').formSelect();
});
You can find the example in the Materialize documentation at https://materializecss.com/select.html and confirm that it does not work. The same occurs on dropdowns, as can be seen at https://materializecss.com/dropdown.html.
I see that materialize renders the select block shown above, but the materialize js function generates an additional div with class "select-wrapper" containing a ul, which then functions as the actual dropdown. The select block itself seems to serve no function. Could it be that the ul element is opaque to mouse events, but not to the emulated mouse events on touch screens, and that this is causing the problem? But this train of thought led me to no solution.
I also followed the suggestion to add <meta name="viewport" content="width=device-width"> , but this does not help.
How can I get this to work? Any help will be appreciated!
Yes, JRSeabird, it works but It only solved the problem on DOMContentLoaded. If you want it to capture every event, try this
$(document).click(function(){
$('li[id^="select-options"]').on('touchend', function (e) {
e.stopPropagation();
});
});
After hours of trying, I found the answer: Stop propagation on touchend event, specifically
$('li[id^="select-options"]').on('touchend', function (e) {
e.stopPropagation();
});
Thanks for your attention and have a nice day.
You should add the "browser-default" class to the select elements.
Of course this will loose the usual materializecss look and feed on that select element Also on other devices.
A possible workaround would be to add that class selectively only when the user browser is safari.
Related
Page source (only iFrame part which contains to form i need to fill)
<iframe title="Form 0" id="hs-form-iframe-0" >
#document
<html>
<body>
<form id="hsForm_405e4c3f-98da-4eb1-bd27-c1886a1f811e">
<div>
<label placeholder="Enter your Vorname">Vorname</span>
<div class="input">
<input name="firstname">
</input>
</div>
</div>
</form>
</body>
</html>
</iframe>
Code i tried:
cy.get('#hs-form-iframe-0').its('0.contentDocument').should('exist')
cy.get('input[name="firstname"]').type( 'Smith') //failes as never found. Is the iFrame the cause of it? Of the form?
TLDR The correct way would be to use .find() on the iframe contentWindow.
cy.get('#hs-form-iframe-0').its('0.contentWindow').should('exist')
.its('body').should('not.be.undefined')
.find('input[name="firstname"]').type( 'Smith')
Example from Working with iframes in Cypress
const getIframeWindow = () => {
return cy.get('iframe[data-cy="the-frame"]')
.its('0.contentWindow').should('exist')
.its('body').should('not.be.undefined')
}
cy.getIframeBody().find('#run-button').should('have.text', 'Try it').click()
There are other potential problems, such as delayed loading of the iframe source. The .should('exist') check on the iframe window does not cover all situations, nor does performing visibility checks on the input.
The cypress-iframe package has a lot more checks built in, so it's a safer way to handle iframes.
You have found the iframe and access its contents but then you search for the input at the root of your DOM instead of the iframe. You can continue the chain of commands by removing the second cy.
cy.get('#hs-form-iframe-0')
.its('0.contentDocument')
.should('exist')
.get('input[name="firstname"]')
.should('be.visible') // always good to check before action
.type( 'Smith')
I have a select tag that should trigger function when an option is selected.
<select id="selector" class="form-control" #change="executeAction" v-model="selectedAction">
<option value="" selected disabled>Select action</option>
<option value="view">View Details</option>
<option value="edit">Edit</option>
<option value="delete">Delete</option>
</select>
methods: {
executeAction() {
console.log('action is se', this.selectedAction);
},
}
Now, what I expected was:
When selecting the same option for the second time (For example: View Details), it should log the selected option.
What I got:
It's not firing at all, I need to select other option so that I can reselect the View Details again.
What I tried:
Using watch, and the result was the same.
Using #input instead of #change, still result was same.
Usin v-on: instead of #, still no luck.
Is this a bug? or wrong implementation?
Anyways, would be great to have an answer to this.
The problem is I need to get the data using axios into select box option .
so it looks like this.
<optgroup label="group1">
<option v-for="aa11 in aa11" :value="aa11.value" :key="aa11.code">{{aa11.value}}</option>
</optgroup>
<optgroup label="group2">
<option v-for="aa12 in aa12" :value="aa12.value" :key="aa12.code">{{aa12.value}}</option>
</optgroup>
and the data is set like this.
data(){
return{
aa11:[],
aa12:[]
}
}
and on js
axios.get('URL')
.then(response=>{
if(response.data.upjongapi[0].aa11 != null){
for(let i=0; i<response.data.upjongapi[0].aa11.length; i++){
this.aa11.push({"code":response.data.upjongapi[0].aa11[i].code,"value":response.data.upjongapi[0].aa11[i].value});
}
}
So, it mounts on the DOM, I can see in on chrome dev tool.
but I want to use bootstrap-select which I downloaded and customize.
(I import it instead of npm install.)
The problem is on bootstrap-select DOM which is dropdown ul, in li it doesn't show.
sometimes it shows, so I can't figure out when it shows or when it doesn't show.
(seems like it depends on the luck =( )
this is the problem capture pic. the options that are in yellow circle should be on select box!!
I want to see all the options, and it all mounted on DOM, but i dont' think it mounted on bootstrap-select dropdown.
What can I do?
To future readers,
updated() {
$(this.$el).find('.selectpicker').selectpicker('refresh');
}
this worked like a charm =)
and here is the page i read
https://github.com/vuejs/Discussion/issues/397
I want to put a form in a popup.
I've found a solution but I'm looking for something cleaner.
I didn't find a way to poping-up an existing tag with swal.
So I created an hidden form in my template :
<div id="myHiddenForm"><form role="form">
<md-input class="email" md-type="email" md-label="Email" md-validate="true"
md-validate-error="invalid email">
<i md-prefix class="material-icons">account_circle</i>
</md-input>
<button type="submit" md-button>
<i class="left material-icons">done</i>Submit
</button>
</form></div>
Then I created the popup with it's innerHTML.
swal({
html: document.getElementById('myHiddenForm').innerHTML,
showConfirmButton: false,
}).catch(swal.noop);
Then I can attach a callback to the submit button and this works finally.
Obviously, I can't use md-value.bind because the displayed form is a copy of the original.
I can access the input's value, using document.querySelectorAll('#myHiddenForm .email input')[0].value but I'm wondering if there's a better way to do this ?
Maybe there's a nice approach to combine aurelia-materialize-bridge and sweetalert2.
I know there's a modal component but it's not capable of keeping the focus inside the modal popup ; plus I already use swal2 everywhere else in this webapp because, you know, it is so sweet.
After a lot of tests and the full reading of the sweetalert2 documentation, I found the correct way to handle this. We simply need to move the <form> node.
swal({
html: '<span></span>'
, showCloseButton: true
, showConfirmButton: false
, onBeforeOpen: dom => swal.getContent()
.appendChild(document.querySelectorAll('#myHiddenForm form'))
, onClose: dom => document.getElementById('myHiddenForm')
.appendChild(swal.getContent().querySelectorAll('form'))
}).catch(swal.noop);
It's perfect to use with aurelia because it preserve everything (monitors, events, validation...).
We don't even need to manually bind the submit button like I did, We can use aurelia's usual way.
Conclusion: RTFM !
I'm trying to make a hidden field show by adding a class when the "other" option is selected from a pull-down list. But I'm not quite sure the correct way to do it.
I have the input hidden and when option is chosen I want to add the class "view" which adds display block making the hidden field visible.
Here is a fiddle showing what I have so far, any help would be much appreciated: http://jsfiddle.net/maikunari/NX795/
$(document).ready(function(){
$("#select-box").change(function(){
if($(this).val() == "other"){
$("#text-field").show();
} else {
$("#text-field").hide();
}
});
});
<select id="select-box">
<option value="Email Newsletter">Email Newsletter</option>
<option value="Yellow Pages ">Yellow Pages </option>
<option id="other-select" value="other">Other</option>
</select>