Auto selection when website load (using react) - javascript

so everytime I load the website for the first time, there is a selection box in the menu and I do not have an idea from where is coming from.
I am using react and react burger menu https://www.npmjs.com/package/react-burger-menu
I upload a picture to show you.
Here is just a sandbox with bad design but I manage to reproduce the error.
The error comes when I use the option isOpen={true}
Every time I reload the page, you can see there is a selection at the start.
https://codesandbox.io/s/lively-dawn-gqtqjv?file=/src/App.js
Thanks for your help and hope my question is not that weird or bad.
I tried with css selector to undo this but nothing works.

According to the document, you can disable the autoFocus by
<Menu disableAutoFocus />
Please refer to Focusing the first menu item: https://www.npmjs.com/package/react-burger-menu
Example code based on your codesandbox: https://codesandbox.io/s/sharp-herschel-15wrd2?file=/src/App.js

Yes I got your issue, basically focus selector outline property is active for 'a' tag you can solve that issue by adding following css snippet in style.css(I tested it & perfectly work on your provided problem)

Related

Windows with space to write text dont appear AJS

I have created custom Issue Tab Panel with field, where I can add comment when Ill press my custom button “add comment”
In my VM template I have
AJS.$("#add-comment-button").click(function(e) {
e.preventDefault();
AJS.dialog2("#add-status-comment").show();
});
This button works fine and window to write text appears, but… In other section in Issues --> Current Search —> Views (Detail Views), windows with space to write text dont appear when I click button “add comment”. It only appers in normal view of issue… Whats problem?
I'm not sure if I understand your question right so I'll give it a try. Maybe it helps in one or the other way.
As you didn't provide the code affecting the window I assume it is possible you are retrieving the issue key or issue id. There are some Jira JS calls that don't work in every view. The reason is unknown to me, but maybe if you use different calls it will work.
Here is the question and answer to this field availability problem on the atlassian community: https://community.atlassian.com/t5/Jira-questions/Get-issueID-in-JavaScript-in-Project-Screen-viewing-issue/qaq-p/824175
Otherwise you should provide some more information.
Regards
Chris

Opening a v-date-picker v-menu on click and focusing a v-text-field inside it?

I've got a date-picker component in an app and used the example for a menu to open it.
I now want to make it more efficient to use for desktop users, so I removed the readonly flag to make manual input possible.
Now desktop users can simply tab through the different fields of the form to quickly input dates and times. The problem here was that the date-picker would not show up when a user tabs into a field, which was easily fixed with adding #focus="menuVariable=true" to the text-field.
But the problem now is that the date-picker won't show up anymore when a user first clicks into the text-field, at least not consistently, which I haven't been able to fix. I already tried to listen for click events and setting the menu's toggle to true then, but I guess the problem is setting that variable in the first place. Not sure how to work around this or how to open that menu manually any other way.
Here is a codepen showing off the problem. Click around a bit between the two fields, the date-picker on the right always opens, the one on the left only occasionally.
Does anyone know a better solution to consistently show the date-picker when a user either clicks into the text-field (or any other part of the v-menu) or tabs into the text-field?
#keyup="menuVariable=true"
#keydown="menuVariable=false"
I worked with this.
there is a nice solution here:
https://codepen.io/Phennim/pen/KKPYGRK
v-on:focus="onFocus"
v-on:blur="onBlur"
Hope it helps you

Unable to click on Material UI Select using WebdriverIO

I want to know if there is any way to click on a hidden element using Webdriverio
One of the components used in our project is material-ui select. I can see that it is hidden when rendered on the page, like below. When I click on it using browser.click('#fileName') in javascript, I am getting an error message as element not visible.
Just wanted to check if there is any way to click on this hidden element from Webdriverio. Our developers are currently looking into implementing native select if I couldn't find anyway to get it working.
Writing it here to see if anyone else faced this problem and has worked around it, if yes, can you please share with me about how you overcome this?
Thanks in advance.
Edit1:
Image of the ui

Mentio JS menu being added to bottom of the page

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?
I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.
I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

show meta box based on Feature image

What I want to achieve is, If there is feature image then show specific <div class="has-featured-image">.
What I have tried or thought ?
I thought of using jQuery to achieve that. Like if there is specific class of feature image is present there, then show <div class='has-featured-image'>, which logically works.
But the issue that I am facing is:
1> If admin removes the featured image, then how can I modify the same DIV with <div class="no-feature-image>"? because the jquery I am inserting is based on DOM ready.
Other thing that I have tried
Other thing I thought of to use wordpress condition of has_post_thumbnail, but the issue is, it only work if admin refresh the page or comes to that page 1st time.
Is it possible to achieve ?
If anybody can give me start then It would be great.
Thanks in advance.

Categories

Resources