Components inside Drawer no longer work after updating to from "AntDesign" Version="0.12.7" to "AntDesign" Version="0.14.2" - ant-blazor

hope this is ok to post here.
I have multiple drawers in my web app containing drop-down boxes, calendars and text inputs. Since I updated to 0.14.2, the dropdowns and calendars no longer work. However, the text fields are all ok. The data populates each of these components as expected (they pull data from the DB and make the items appear correctly.) However, when I try to click on a drop-down item, the drop-down menu does not respond to the change, neither does the calendar etc.
I have looked at all of the docs, and I appear to be doing everything correctly, but this problem persists. As a test, I rendered these components within the row, and everything works as expected; it is only once it is inside of a drawer that it stops working. Everything works as expected in "AntDesign" Version="0.12.7".
Any suggestions?
<Drawer Closable="true" Width="720" Visible="drawerVisible" Title=#Pagetitle OnClose="_=>Close(Data)">
<Row Gutter="16">
<AntDesign.Col Span="24">
<Text><b>Title</b></Text>
<Input #bind-Value="Data.Title" Placeholder=" Please enter a Data Title" TValue="string"></Input>
</AntDesign.Col>
</Row>
<br />
<Row Gutter="16">
<AntDesign.Col Span="12">
<Text><b>Engineer</b></Text>
<Select Placeholder="Select Engineer" PopupContainerMaxHeight="500px" #bind-Value=Data.UploadedBy ValueName="#nameof(DataUser.UserId)" LabelName="#nameof(DataUser.UserName)" DefaultActiveFirstOption Loading=!Users.Any() DataSource=#Users.Where(u => u.Is_Active == true).OrderBy(u => u.UserName) />
</AntDesign.Col>
</Row>
<Row>
<AntDesign.Col Span="12">
<Text><b>Customer</b></Text>
<Select Style="width: 240px;" PopupContainerMaxHeight="500px" #bind-Value=#Data.CustomerId ValueName="#nameof(DataCustomer.CustomerId)" LabelName="#nameof(DataCustomer.CustomerName)" Placeholder="Select Customer" DefaultActiveFirstOption Loading=!Customers.Any() DataSource=#Customers />
</AntDesign.Col>
<AntDesign.Col Span="12">
<Text><b>Priority</b></Text>
<Select Style="width: 240px;" PopupContainerMaxHeight="500px" #bind-Value=#Data.Priority ValueName="#nameof(DataPriority.Priority)" LabelName="#nameof(DataPriority.PriorityName)" Placeholder="Select Prioirity" DefaultActiveFirstOption Loading=!Priorities.Any() DataSource=#Priorities />
</AntDesign.Col>
</Row>
<br />
<br />
<Row>
<AntDesign.Col Span="12">
<Text><b>Select Date</b></Text>
<div class="site-calendar-demo-card">
<DatePicker TValue="DateTime?" Picker="#DatePickerType.Date" #bind-Value=Data.ExpiryUtc />
</div>
</AntDesign.Col>
<AntDesign.Col Span="12">
<Text><b>Select Item</b></Text>
<Select Mode="multiple"
Placeholder="Please select"
#bind-Values="SelectedItems"
TItemValue="int"
TItem="string"
OnSelectedItemsChanged="OnSelectedItemsChangedHandler"
Style="width: 100%; margin-bottom: 8px;"
EnableSearch>
<SelectOptions>
#foreach (var item in Items) {
<SelectOption TItemValue="int" TItem="string" Value=#item.ItemId Label=#item.ItemName />
}
</SelectOptions>
</Select>
</AntDesign.Col>
</Row>
<br />
<AntDesign.Col Span="24">
<Button Type="default" Style="float: right" #onclick="_=>Close(Data)">Cancel</Button>
#if (Pagetitle == "New Data Item") {
<Button Type="primary" Style="float: right" #onclick="_=>OnSubmit(Data)">Submit</Button>
} else {
<Button Type="primary" Style="float: right" #onclick="_=>UpdateDataItem(Data)">Update</Button>
}
</AntDesign.Col>
</Drawer>

It's a bug it seems. Oh well...
https://github.com/ant-design-blazor/ant-design-blazor/issues/3102

Related

Trouble using Watir to click a tab on a page

I am trying to click the second tab Tab1_imgImbillsTab.
<div id="menuTabsForPageContainer" >
<div id="menuTabsForPage">
<img id="Tab1_imgHomePageTab" accesskey="H" disabled="disabled" class="imgHomePageTab" src="images/home_deselected_tab.png" alt="Home" style="border-width:0px;" />
<img id="Tab1_imgImbillsTab" accesskey="B" class="imgImbillsTab" src="images/bills_deselected_tab.png" alt="Bills" style="border-width:0px;" />
<img id="Tab1_imgArchiveTab" accesskey="C" class="imgArchiveTab" src="images/chartrack_deselected_tab.png" alt="Chart Rack" style="border-width:0px;" />
<img id="Tab1_imgPracMgmtTab" accesskey="I" class="imgPracMgmtTab" src="images/managementreporting_deselected_tab.png" alt="Business Intelligence" style="border-width:0px;" />
<img id="Tab1_imgSysToolTab" accesskey="Y" class="imgSysToolTab" src="images/systemtools_deselected_tab.png" alt="System Tools" style="border-width:0px;" />
<img id="Tab1_imgBulletinTab" accesskey="S" class="imgBulletinTab" src="images/settings_deselected_tab.png" alt="Settings" style="border-width:0px;" />
</div>
</div>
I tried several things:
browser.button(:id => 'Tab1_imgImbillsTab').click
browser.div(:id, "menuTabsForPage").div(:id, "menuTabsForPage").button(:id, "Tab1_imgImbillsTab").click
I also tried to reference it as a clickable image by referencing the "src" of the image. These tabs, I believe have JavaSceript behind them. I can not figure out what I'm doing wrong.
The code:
browser.button(:id => 'Tab1_imgImbillsTab').click
Says to find a button element or input element (of type button, reset, submit or image) that has the id "Tab1_imgImbillsTab".
However, based on the HTML, the tab is an img tag. As a result, it will never be found by the button method. Tell Watir to look for the img tag instead:
browser.img(:id => 'Tab1_imgImbillsTab').click

react-bootstrap ButtonGroup as radio buttons

I'm trying to make a group of react-bootstrap buttons into a radio button set. I can easily do this with bootstrap with <input type="radio"> elements, but can't figure out how to do this with react-bootstrap. The following code allows the user to select every button, instead of just one.
JS:
const operationButtons = (
<ButtonGroup>
<Button active>Radio 1</Button>
<Button>Radio 2</Button>
</ButtonGroup>
);
React.render(operationButtons, document.getElementById('operationButtonsDiv'));
HTML:
<div name="operationButtonsDiv" id="operationButtonsDiv" data-toggle="buttons"/>
The framework has changed since the accepted answer and they have now replicated the option group behavior of Bootstrap framework. All you need to do now is to add a group name to each option in the group:
<Radio name="groupOptions">Option 1</Radio>
<Radio name="groupOptions">Option 2</Radio>
<Radio name="groupOptions">Option 3</Radio>
So I ended up nesting a radio Input in the Button like you would normally do in Bootstrap.
render() {
return (
<ButtonGroup>
<Button active>Radio 1
<Input ref="input1" type="radio" name="radioButtonSet" value='input1' standalone defaultChecked/>
</Button>
<Button>Radio 2
<Input ref="input2" type="radio" name="radioButtonSet" value='input2' standalone/>
</Button>
</ButtonGroup>
)
}
I also overrode the default .radio css to fix how it's displayed.
.radio {
margin-top: 0;
margin-bottom: 0;
}
React-bootstrap has plans to implement RadioGroup eventually:
https://github.com/react-bootstrap/react-bootstrap/issues/342
Some of the answers on this page don't work. Maybe things have changed since then.
I put together this with the help of React Bootstrap website.
<Col>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio name="group1"/>
<InputGroup.Text >London</InputGroup.Text>
</InputGroup.Prepend>
<FormControl/>
</InputGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio name="group1"/>
<InputGroup.Text >New York</InputGroup.Text>
</InputGroup.Prepend>
<FormControl/>
</InputGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio name="group1"/>
<InputGroup.Text >Colombo</InputGroup.Text>
</InputGroup.Prepend>
<FormControl/>
</InputGroup>
To make the radio button set function as a single group you have to give them a name (so that only one radio button is selected at any given time).
Adding a form control makes the edges of the input nicely rounded off but it also makes the radio button label editable. If this is a problem you can leave out the form control.
If you want a different look and feel you can try this.
<Form.Check
type="radio"
label="London"
name="group2"
id="radio1"
/>
<Form.Check
type="radio"
label="New York"
name="group2"
id="radio2"
/>
<Form.Check
type="radio"
label="Colombo"
name="group2"
id="radio3"
/>
However with these getting the value and handling onChange was difficult. Eventually I used another control.
This is a npm package called react-radio-group. You have to install it by running this line on the command.
npm install react-radio-group
Then import it in your file.
import { Radio, RadioGroup} from 'react-radio-group'
Here's the code for the button group.
<RadioGroup name="fruits" onChange={(e) => handleOnChange(e)}>
<div className="radio-button-background">
<Radio value="Apple" className="radio-button" />Apple
</div>
<div className="radio-button-background">
<Radio value="Orange" className="radio-button" />Orange
</div>
<div className="radio-button-background">
<Radio value="Banana" className="radio-button" />Banana
</div>
</RadioGroup>
classNames are where I have given the styles.
I've just encountered the same problem and solved it by using the the component's state:
_onOptionChange(option) {
this.setState({
option: option
});
}
render() {
render (
<ButtonGroup>
<Button onClick={this._onOptionChange.bind(this, 'optionA')} active={this.state.option === 'optionA'}>Option A</Button>
<Button onClick={this._onOptionChange.bind(this, 'optionB')} active={this.state.option === 'optionB'}>Option B</Button>
</ButtonGroup>
);
}
Just using the tags worked for me. Make sure they all have the same name="radio-group-value-here". To get one of the buttons to be selected on render use checked={bool}. I also used disabled={bool} to show but disallow some choices. I settled on using onClick which seems to be working. Lastly, this is all in a dialog and the offset was needed to keep the radio buttons from smushing up against the left edge.
<Row>
<Col sm={11} smOffset={1} >
<Radio name="changeset-chooser"
checked={this.state.checked === 'current'}
disabled={this.props.changeset.status === "pending"}
onClick={ (e) => { /* event handler */ } } >
Current Data
</Radio>
</Col>
</Row>
<Row>
<Col sm={3} smOffset={1} >
<Radio name="changeset-chooser"
onClick={ (e) => { /* event handler */ } } >
History
</Radio>
</Col>
<Col sm={7} >
<NotPartOfSample />
</Col>
</Row>
This is in 2022, so the library has moved.
Here is how yo would create a yes/no radio:
<Form>
<Form.Check
type="radio"
name="group1"
id={`default-radio`}
label={`Yes!`}
/>
<Form.Check
type="radio"
name="group1"
id={`default-radio`}
label={`No`}
/>
</Form>
The name="group1" makes the buttons TOGGLE. If you don't want to toggle, give them different names or no names.
Hope this helps someone who might stumble across this question like I did.

Magento - newsletter pop code using ajax update in form

I have the below code that is being used in cms page pop up
the problem im having is if you leave email address input field blank and hit the submit (in the case "Get Code" button, you briefly see the red validation message but then hides the form, shows the hidden div.
why or how can I prevent this process, i want it to validate but proceed to show the hidden div content. Below is the code.
<div id="pop-confirm" style="display: none;">
<h1 style="color: #000000; font-weight: bold;">THANKS!</h1>
<p> </p>
<h2>Use code: <strong>extra15</strong><br /> for 15% off your purchase.</h2>
</div>
<form id="newsletter-validate-detail" action="home/send" method="post" onSubmit="new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); return false;">
<div class="block-content">
<h2>ENTER YOUR EMAIL<br /> AND GET</h2>
<div class="form-subscribe-header">
<h1>15% OFF</h1>
<br />
<h1>EVERYTHING!</h1>
</div>
<div class="input-box"><input id="newsletter" class="input-text required-entry validate-email" title="Sign up for our newsletter" type="text" name="email" /></div>
<br />
<div class="actions"><button class="button" title="Get Code" type="submit"><span><span>Get Code</span></span></button></div>
<br />
<p><em>* Promotion ends April 6th</em></p>
</div>
</form>
<script type="text/javascript">// <![CDATA[
var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
// ]]></script>
Im very new to ajax so maybe ive done something wrong.
any ideas or suggestion would be greatly appreciated.
Thanks
Try changing your onSubmit to the following:
onSubmit="if(newsletterSubscriberFormDetail.validator.validate()){ new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); } return false;"`
This wil trigger the validator before submitting the form with AJAX. Works perfect for me :)

How to write XPATH for nodes under dynamic hierarchy

I got a big XML. A snippet of that XML look like this:
<div class="x-column-inner" id="ext-gen422" style="width: 850px;">
<div id="ext-comp-1206" style="width: 14px;" class=" x-column">
<div tabindex="-1" class="x-form-item x-hide-label" id="ext-gen434">
<label class="x-form-item-label" style="width:100px;" for="ext-comp-1180" id="ext-gen435"></label>
<div style="padding-left:105px" id="x-form-el-ext-comp-1180" class="x-form-element">
<div class="x-form-check-wrap" id="ext-gen436" style="width: 14px; height: 28px;">
<input type="checkbox" name="ext-comp-1180" id="ext-comp-1180" autocomplete="off" class=" x-form-checkbox x-form-field">
<label class="x-form-cb-label" for="ext-comp-1180" id="ext-gen437"> </label>
</div></div> <div class="x-form-clear-left">
</div>
</div>
</div>
<div id="ext-comp-1207" style="width: 150px;" class=" x-column">
<label id="ext-comp-1203" style="width: 140px;">Add to Watchlist</label>
</div>
<div id="ext-comp-1208" style="width: 107px;" class=" x-column">
I need to find 'input' node of checkbox type based on label node having text 'Add to Watchlist'.
As both 'input' and 'label' node lies in different hierarchy, // syntax doesn't seem to work:
//div[label[contains(text(),'Add to Watchlist')]]
will just give parent div of child label.
I tried to start from the topmost node of this snippet
$x("//div[#class='x-column-inner' and //label[contains(text(),'Add to Watchlist')]]")
but that is giving 6 possible matches.
Note: #id attribute can't be used as this is getting assigned dynamically to nodes so next time page loads #id will be different.
I don't want to use position() predicate as that makes XPATH static and xpath may break with any change in position.
You could try something like this, but it looks very greedy... Basically what it does is searching in every axes of the input tags to see if there is an associated label tag. So for each input it searches in its ancestors, descendants and siblings.
There are certainly some smarter solutions.
//input[#type = 'checkbox' and (#id = ancestor::label/#for or #id = descendant::label/#for or #id = following::label/#for or #id = preceding::label/#for)]
However your snippet is not interesting no input tag will be matched, please consider providing a better snippet. It would improve the answers accuracy.
Edit : Here is a (non-tested) way to add the 'Add to Watchlist' constraint.
//input[#type = 'checkbox' and (#id = ancestor::label[. = 'Add to Watchlist']/#for or #id = descendant::label[. = 'Add to Watchlist']/#for or #id = following::label[. = 'Add to Watchlist']/#for or #id = preceding::label[. = 'Add to Watchlist']/#for)]
But once again, those xpath requests are very greedy and your are not guaranteed to match every input element associated to a label for example the following input won't be match in this snippet:
<div>
<div>
<label for="id">Add to Watchlist</label>
</div>
<div>
<input type="checkbox" id="id" />
</div>
<div>
There may be more efficient solutions in one xpath request, but you should consider doing several request.
For example, one request to find every for attribute value of the label elements with the text 'Add to Watchlist' and then doing another request to find the associated input elements.
I should also try to restrict your request to the scope a the underlying form element. Perhaps I will edit with a better request if I find the time.
Edit 2
Here is a working and smarter request
//form//input[#type = 'checkbox' and #id = ancestor::form[1]//label[. = 'Add to Watchlist']/#for]
You can confront it to this snippet
<html>
<form>
<label for="bar">Add to Watchlist</label>
<div>
<div>
<label for="id">Add to Watchlist</label>
</div>
<div>
<input type="checkbox" id="id" />
<input type="checkbox" id="foo" />
<input type="checkbox" id="bar" />
<input type="checkbox" />
<input type="checkbox" id="" />
</div>
</div>
</form>
<label for="foo">Add to Watchlist</label>
</html>
Bust the most important is that you understand how it works and why it is better. Please take the time to think about it.

How do I unhide a CFDIV that has dynamic content with AJAX binding itself?

I have the following CFSELECT tags that are used to populate a text input:
<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" />
The text input is the only value that needs to be submitted in a form:
<cfform name="addItem" method="post" action="somepage.cfm">
<cfinput
type="text"
id="item"
name="item"
bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />
<cfinput
type="submit"
name="addButton"
value="Add Item" />
</cfform>
I want the form and it's contents to be visible only when all three selections have been made, and there is a value for the text input. What is the best way to do this? I'm assuming some use of CFDIV is the best way, but I'm not sure how to load the dynamic content (the CFINPUTs) this way.
<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" onChange="toggleForm();" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" onChange="toggleForm();" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" onChange="toggleForm();" />
<div id="theForm" style="display:none">
<cfform name="addItem" method="post" action="somepage.cfm">
<cfinput
type="text"
id="item"
name="item"
bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />
<cfinput
type="submit"
name="addButton"
value="Add Item" />
</cfform>
</div>
<script type="text/javascript">
function toggleForm(){
var a = document.getElementById("this").selectedIndex;
var b = document.getElementById("that").selectedIndex;
var c = document.getElementById("theOther").selectedIndex;
if (a > -1 && b > -1 && c > -1){
document.getElementById("theForm").style.display = "";
}
}
</script>
Personally I would simplify that JS a bit by using jQuery, but I don't know if you're already using jQuery on your site, and I don't want to be another "use jquery" empty answer; so this should work without jQuery, should you want/need to go without it. (But jQuery is awesome!)

Resources