Every menu option rendered as selected. Strange workaround - react-select

I just upgraded two projects from using react-select 1.2.1 to 2.0.0. The first project is a "demo" for trying out react-select, a simple one based on Create React App. The other project is the serious stuff, including old and new technologies (Java, Maven). In the simple project the new react-select worked as predicted, but in the serious project I found that when I had made a selection and opened the menu again, all the options were rendered as selected!
I then found out about the isOptionSelected property and I tried this in my simple project first:
isOptionSelected={(selOpt, selOptArr) => false}
As expected, this caused no option to be rendered as selected. However, when I put the same line into the serious project, it cured the problem there; now only the correct option was rendered as selected!
This is the complete Select definition:
<Select
components={{ DropdownIndicator }}
styles={mySelectStyles}
placeholder={someText}
isClearable={true}
isDisabled={readOnly}
isOptionSelected={(selOpt, selOptArr) => false}
noOptionsMessage={() => "No match"}
value={value}
onChange={(selectedItem) => {
if (selectedItem !== null) console.log(...);
}}
options={myOptions}
/>
I have not been able to find out why the line with isOptionSelected causes different rendering in my two projects. To me it seems like a bug in react-select 2.0.0.

Related

Text input context menu still showing on Android after apply contextMenuHidden

I'm facing an issue on TextInput's contextMenuHidden on Android, IOS works well not showing the context menu though.
<TextInput style={styles.input} contextMenuHidden={true} />
I did tried the view component solution:
removeClippedSubviews={true}
However, the behaviour came back, after I delete the whole text input -> retype the text -> double tap (shows back context menu)
Not sure if anyone experienced this before, but need some advice/suggestion for Android case, must I create a custom native ui component instead?

How to make vuepress dynamically create the side navigation?

I'm trying to simplify the creation of my view press site so I don't have to add entries on the left side navigation manually.
So far I tried
"vuepress-auto-sidebar": "^1.1.1"
But it renders the .git and node_modules folder as well. It also does not render the title.
Not only that it does not render a file called upload.md in the root of my project.
I am thinking I may just have to code it manually by doing some form of directory scanning (though I am not sure how to "watch" that, so that it updates when I add new files).
The way I worked around it so far is to configure theme-config to do this which removes the errant modules.
sidebar: sidebar
.getSidebar()
.filter((v) => v.path !== "/node_modules/" && v.path !== "/.git/"),
Then add filters to it skips .git and node_modules folders. Following that I have to parse the Markdown to extract the title.
EDIT: usually, you do write your .md docs into a docs directory (not at the root of the project) and then launch it with this (from package.json)
vuepress dev docs --no-clear-screen --open
As for the sidebar, my first answer is below.
From this github issue: https://github.com/vuejs/vuepress/issues/613
You can see that this is not available out of the box. So, you could use some solutions given there and generate it kinda yourself but you could also try this npm package called vuepress-bar.
It is working great ! Beware tho, I had some incompatibility issues with it after upgrading to Nuxt 2.15.2, not sure if it's still the case but this way pretty annoying to not being able to run vuepress at all.
I chose a different plugin vuepress-bar in the end but still had to implement the filter
const getConfig = require("vuepress-bar");
const { nav, sidebar } = getConfig();
module.exports = {
themeConfig: {
nav,
sidebar: sidebar.filter(i => i.title !== "Node Modules"),
smoothScroll: true
}
};

More options menu does not show the options

I am trying to implement more options menu in mobile app and I am using react-native-options-menu package from react-native. Even though I click on the more options button the menu doesn't show up. Below is the code that I have used.
{<OptionsMenu
customButton={(<Icon type = {iconNames.fontAwesome} name={iconNames.more} color={"white"} size={30} style={{marginRight: 8}}/>)}
destructiveIndex={1}
options={["Edit", "Delete", "Cancel"]}
actions={[this.editPost, this.deletePost]}/>}
PS: I don't know what I am missing or doing wrong. Also, in the import statement (import OptionsMenu from "react-native-options-menu") it shows 3 dots below react-native and when I hover over it, it says cannot find module, but the module is present in node-modules
Thanks in advance!

rails 3.2 not detecting javascript changes?

i am a newbie in rails 3.2. now i have a problem following:
i have 2 patials for showing highchart are _device_per_product.html.erb and device_per_platform.html.erb. and i render these by this way:
jQuery("#element_div").html("<%= escape_javascript(render(:partial => 'partial_page')) %>");
when i click a link to render my partial,it works. but next time, i render another partial,it just load javascript code but not generate highchart form these code.
In my opinion,For First time the javascript is freshly loading in my page. So it will work. Next time my javascript is not working. please help me solve that problem
I suspect you have something like:
$('#element_div a').click(function() {
//do something
});
This only binds to what's on the page when it fires. If you are introducing new (or replacing) this then you need to change the listener.
$(document).on("click","#element_div a", function () {
// do something
}} );
A more detailed explanation along with alternatives for older versions of jquery can be found at https://stackoverflow.com/a/10394566/2197771

How add CJuiDatePicker in JQRelcopy on Yii Framework

I have a problem with CJuiDatePicker in the module JQRelcopy on Yii framework.
I use this module as I have a form with a datepicker field to be copied as many times as the user wishes.
The module works fine if I put a normal field (without datepicker), but as soon as I add the module CJuiDatePicker which is also a module of the Yii framework, I have a blank page appears. I followed the following tutorial: http://www.yiiframework.com/extension/jqrelcopy/ explains the integration jqrelcopy in a form containing CJuiDatePickerm, which is exactly what I need.
I study the problem and I saw that it was when I Atoute the following line in the properties of my widget JQRelcopy the problem occurs:
'jsAfterNewId' => JQRelcopy::afterNewIdDatePicker($datePickerConfig),
in
$this->widget('ext.jqrelcopy.JQRelcopy', array(
'id' => 'copylink',
'removeText' => 'remove',
//add the datapicker functionality to the cloned datepicker with the same options
'jsAfterNewId' => JQRelcopy::afterNewIdDatePicker($datePickerConfig),
));
I look in several forums and anywhere a person has had the same problem as me.
The only way I could do this in the past, was ditching the CJuiDatePicker and using the on method of JQuery.
$('body').on('focus', '.idata', function(){
jQuery(this).datepicker(
jQuery.extend(
{showMonthAfterYear:false},
jQuery.datepicker.regional['pt-BR'],
{'showAnim':'fold','dateFormat':'dd/mm/yy'}
)
);
});
Or, you can use live method...
Just Import ext.jqrelcopy.JQRelcopy in your form file at the top
Yii::import('ext.jqrelcopy.JQRelcopy');
Your Problem be solved if any Issue let me know i will further assist.