Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#11813 closed defect (invalid)

NumberSpinner in Grid - FIREFOX issue when mouseClick in textarea of numberSpinner

Reported by: LeticiaGolubov Owned by: Bryan Forbes
Priority: high Milestone: tbd
Component: DojoX Grid Version: 1.4.3
Keywords: Cc: Evan
Blocked By: Blocking:

Description

I'm not able to place my cursor on anywhere other than the end of the text area of NumberSpinner? - and modifying the text can only be done by typing backspace to delete existing number then typing in the new number.

This only happens in Firefox (3.6.10 and previous versions too), but works as expected in Internet Explorer. See attached cursorFocus...

the grid's structure: var ${ns}structure = [

{ cells: [[

{ name: '<fmt:message key="poll_interval" bundle="${mc_langset}"/>', field: INTERVAL_COLUMN,

get:${ns}getCellContentInterval, width:'10em', styles: 'text-align: center;' }

]]}

];

This is how the widget is created inside the grid: function ${ns}getCellContentInterval(inRowIndex) {

var grid = ${ns}table.grid; var rowItem = grid.getItem(inRowIndex);

if (rowItem !== null) {

var id = grid.store.getValue(rowItem,'0'); if (${ns}isValidItem(id)) {

var interval = grid.store.getValue(rowItem, INTERVAL_COLUMN); if (interval == ) {

return '&nbsp;'

} if(dijit.byId('templateId'+id)) {

dijit.byId('templateId'+id).destroyRecursive();

}

set timeout so that number spinner is created after the node is in place setTimeout(function() {

if (!dijit.byId('templateId'+id)) {

var newWidget = new dijit.form.NumberSpinner?({

style: "width:90px", value: interval, smallDelta: "10", maxlength: "5", constraints: {

min:0, max:99999, places:0

}

}, dojo.byId('templateId'+id)); dojo.connect(dojo.byId('templateId'+id), "onblur", dojo.hitch(this, "${ns}setInterval", id, inRowIndex)); }

}, 50);

return '<div id="' + 'templateId' + id + '"></div>';

}

[..........]

Attachments (5)

cursorFocus.jpg (20.4 KB) - added by LeticiaGolubov 9 years ago.
cursor Focus on textarea of number spinner
numberSpinnerOnGrid.jsp (2.3 KB) - added by LeticiaGolubov 9 years ago.
Source code for testing number spinner on grid, copy movies.cvs to same dir
movies.csv (322 bytes) - added by LeticiaGolubov 9 years ago.
The datasource for test, taken from Dojo examples
gridwithnumberspinner.jpg (44.6 KB) - added by LeticiaGolubov 9 years ago.
Grid with number spinner test, screenshot
11813.html (746 bytes) - added by Douglas Hays 8 years ago.
simplified and smaller standalone testcase

Download all attachments as: .zip

Change History (13)

Changed 9 years ago by LeticiaGolubov

Attachment: cursorFocus.jpg added

cursor Focus on textarea of number spinner

comment:1 Changed 9 years ago by LeticiaGolubov

NOTE: that all other functions of the number spinner seem to work as expected.

BUT I noticed after I added debug to onmouseclick, and onfocus, via dojo.connect, that those functions were only called when the widget was created. onblur works as expected.

comment:2 Changed 9 years ago by bill

Component: GeneralDojoX Grid
Owner: changed from anonymous to bryanforbes

comment:3 Changed 9 years ago by LeticiaGolubov

I investigated this further and stripped the code down to the bare minimum - the issue is still there, it's now even more obvious, it's almost impossible to direct focus to the textarea of the number spinner. Here's the full source for numberSpinnerOnGrid.jsp:

<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" "http://www.w3.org TR/html4strict.dtd">

<% String dojoRootPath = request.getContextPath() + "/scripts/DojoBuild"; %>

<!-- <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" type="text/javascript"></script> -->

<head> <style type="text/css">

body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }

</style> <script src="<%=dojoRootPath%>/dojo/dojo.js" djConfig="parseOnLoad: true"> </script> <script type="text/javascript">

var grid=null; global var

dojo.require("dojox.grid.DataGrid?"); dojo.require("dojox.data.CsvStore?"); dojo.require("dijit.form.NumberSpinner?");

dojo.addOnLoad(function() { our test data store for this example: var store = new dojox.data.CsvStore?({

url: 'movies.csv'

});

set the layout structure: var layout = [{

field: 'Title', name: 'Title of Movie', width: '200px'

}, {

field: 'Year', name: 'Year', get: getYearSpinner, width: '150px'

}, {

field: 'Producer', name: 'Producer', width: 'auto'

}

];

create a new grid: grid = new dojox.grid.DataGrid?({

query: {

Title: '*'

}, store: store, clientSort: true, rowSelector: '20px', structure: layout

}, document.createElement('div'));

append the new grid to the div "gridContainer": dojo.byId("gridContainer").appendChild(grid.domNode);

Call startup, in order to render the grid: grid.startup();

});

function getYearSpinner(rowIndex) {

var year = grid.store.getValue(grid.getItem(rowIndex), 'Year');

var mySpinner = new dijit.form.NumberSpinner?({

value: year, smallDelta: 1, id: rowIndex, constraints: {

min: 1900, max: 2010, places: 0

},

style: "width:100px"

}, "spinnerId");

return mySpinner;

} </script> <link rel="stylesheet" type="text/css" href="<%=dojoRootPath%>/dijit/themes/tundra/tundra.css" />

<style type="text/css">

@import "<%=dojoRootPath%>/dojox/grid/resources/Grid.css"; @import "<%=dojoRootPath%>/dojox/grid/resources/tundraGrid.css"; .dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%; margin: 0; }

</style>

</head>

<body class="tundra"> <div id="gridContainer" style="width: 100%; height: 100%;"> </div> </body> </html>

=================================================================================== Here is movies.cvs, copy to same dir as numberSpinnerOnGrid.jsp above

Title, Year, Producer City of God, 2002, Katia Lund Rain, 2003, Christine Jeffs 2001: A Space Odyssey, 1969, Stanley Kubrick "This is a ""fake"" movie title", 1957, Sidney Lumet Alien, 1979, Ridley Scott "The Sequel to ""Dances With Wolves.""", 1982, Ridley Scott "Caine Mutiny, The", 1954, "Dymtryk ""the King"", Edward"

=================================================================================== I wonder if there's something incorrect with how I'm adding the number spinner to the data grid? Although I can't find any real recent examples on how to do this.

Changed 9 years ago by LeticiaGolubov

Attachment: numberSpinnerOnGrid.jsp added

Source code for testing number spinner on grid, copy movies.cvs to same dir

Changed 9 years ago by LeticiaGolubov

Attachment: movies.csv added

The datasource for test, taken from Dojo examples

comment:4 Changed 9 years ago by LeticiaGolubov

I have added the source code for the test I ran, as coping and pasting directly from here caused too many errors.

The only adjustment needed is to <% String dojoRootPath = request.getContextPath() + "/scripts/DojoBuild"; %>

Any updates on this ticket?

Changed 9 years ago by LeticiaGolubov

Attachment: gridwithnumberspinner.jpg added

Grid with number spinner test, screenshot

comment:5 Changed 9 years ago by bill

Owner: changed from bryanforbes to Bryan Forbes

comment:6 Changed 9 years ago by LeticiaGolubov

Any updates on this ticket please? Or even an acknowledgment?

Changed 8 years ago by Douglas Hays

Attachment: 11813.html added

simplified and smaller standalone testcase

comment:7 Changed 8 years ago by Douglas Hays

Cc: evan added
Resolution: invalid
Status: newclosed

I attached a much simpler testcase. This is a user error. The DataGrid? instance should have specified selectable:true

comment:8 Changed 8 years ago by Evan

Cc: Evan added; evan removed
Note: See TracTickets for help on using tickets.